Angular中利用canActive(路由守卫功能)限制路由跳转
使用angular作为前端框架时,通过路由实现组件之间跳转,很多时候都需要对组件的访问作权限拦截。比如某些页面(组件)登录后才能访问,某些页面需要特殊权限(角色)才能访问。我们后台需要根据用户身份进行数据拦截,Angular也需要对路由跳转进行拦截。下面我用一个拦截登录的例子简单介绍一下该功能。
1.创建一个自己的服务组件用于验证用户是否登录
// src/app/user/login-auth.service.ts
import { Injectable } from '@angular/core';
import { Http,Headers,RequestOptions } from '@angular/http';
@Injectable()
export class LoginAuthService {
private headers = new Headers({'Content-Type': 'application/json;'});
private options = new RequestOptions({ headers: this.headers });
constructor(private http:Http ){ }
// 是否登录
public isLogin(): boolean {
const token = localStorage.getItem('token');
// Check whether the token is expired and return
// true or false
return !this.isTokenExpired(token);
}
//利用http请求判断用户是否登录或token是否过期
private isTokenExpired(token:string):boolean{
...
this.http.get....
...
return isTokenExpired
}
}
2.创建路由验证服务,实现CanActivate接口
// src/app/user/auth.service.ts
import { Injectable } from '@angular/core';
import { Router, CanActivate } from '@angular/router';
import { LoginAuthService } from './login-auth.service';
@Injectable()
export class AuthService implements CanActivate {
constructor(public router: Router,private loginAuth:LoginAuthService) {}
canActivate(): boolean {
if(!this.loginAuth.isLogin()){
this.router.navigate(['login']);
return false;
}
return true;
}
}
3.路由列表中对需要登录才能访问的路径下加上canActive
import { Routes } from '@angular/router';
import { AuthService } from './user/auth.service';
export const ROUTES: Routes = [
...
{
path: 'personal/:id',
component: PersonalComponent,
canActivate: [AuthService]
},
...
]
4.最后别忘了在AppModule的providers加入服务组件
@NgModule({
declarations: [
PersonalComponent
],
imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule,
HttpClientModule,
RouterModule.forRoot(ROUTES, { preloadingStrategy: PreloadAllModules })
],
providers: [AuthService,LoginAuthService],
bootstrap: [AppComponent]
})
export class AppModule { }
这只是一个简单登录拦截例子,如果有复杂的角色身份认证,使用这个方式都一样可以实现。无非定义不同的验证服务,根据当前用户身份进行匹配。
如果还想详细了解路由守卫功能,可通过官网详细了解,链接如下:
https://angular.cn/guide/router#milestone-5-route-guards