路由守卫的作用,在做登录等权限验证的时候,需要用到路由守卫,辅助进行验证。
比如:使用angular做的是单页应用,如果不用任何权限控制的话,就算使用了用户登录功能,假如我们需求是当用户登录成功之后才能看其他的页面。但是如果不用任何权限控制,我们用户就算登录失败,可以直接在url地址中输入需要跳转页面路由,则就会看到不许要被看到的内容。
所以:上述情况下,我们需要通过路由守卫来达到我们的目的。
通过angular的路由守卫,就可以设置权限验证,当用户登录成功之后,才能跳转到其他的页面,否则只能跳转到用户登录界面等待用户登录。
使用方式:
通过angular官网提供的CanActivate: 要求认证
进行认证。
应用程序通常会根据访问者来决定是否授予某个特性区的访问权。 你可以只对已认证过的用户或具有特定角色的用户授予访问权,还可以阻止或限制用户访问权,直到用户账户激活为止。
CanActivate 守卫是一个管理这些导航类业务规则的工具。
ng generate guard auth/auth
创建权限验证文件
auth.guard.ts
import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
@Injectable({
providedIn: 'root'
})
export class AuthGuard implements CanActivate {
constructor(private router: Router) {
}
// 路由守卫
canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
return this.checkLogin();
}
checkLogin(): boolean {
// 判断本地有没有token
const token = sessionStorage.getItem('access_token');
// 如果token有值,表示登录成功,继续跳转,否则跳转到首页
if (token) { return true; }
this.router.navigate(['/login']);
return false;
}
}
路由里面配置