angular4拦截器的使用

本文聚焦Angular4,探讨如何配置和使用拦截器,包括在app-routing中的设置步骤,以及对Angular7中可能的变化进行简要说明,提示由于Angular7内部HTTP封装的变化,目前相关文档尚不全面。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

不说废话直接上干货
在app-routing中:

import {AuthGuard} from './_guards/auth.guard';
const routes: Routes = [
   { path: '', component: HomeComponent,
       canActivate: [AuthGuard],
       children: [
       xxx
       xxx
       xxx
]
   },
];

下一步:配置 auth.guard

import {Injectable} from '@angular/core';
import {CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router} from '@angular/router';
import { SessionService } from 'app/shared/session.service';

@Injectable()
export class AuthGuard implements CanActivate {

 constructor(private router: Router,
     private sessionService: SessionService,
 ) {
 }

 canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {

   const user = this.sessionService.getCurrentUser() ; //get login user msg
   if (user&&user.id) {
     // logged in so return true
     return true;
   }

   // not logged in so redirect to login page with the return url
   if (state.url === '/') {
     console.log('没有登陆,直接跳转登陆页');
     this.router.navigate(['/login']);
   } else {
     console.log('没有登陆,访问子页面,直接跳转登陆页');
     this.router.navigate(['/login'], { queryParams: { returnUrl: state.url }});
   }
   return false;
 }
}

(不知道angular7是否可行,因为前段时间用了下ng7 发现内部http的封装已经改变了,国内外目前为止也没有针对ng7的详细文档)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值