angular7中路由守卫

路由守卫的作用，在做登录等权限验证的时候，需要用到路由守卫，辅助进行验证。

比如：使用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;
    }
}

路由里面配置