路由守卫

参考：https://blog.csdn.net/yw00yw/article/details/89381043
https://www.cnblogs.com/starof/p/9012193.html

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

比如：使用angular做的是单页应用，如果不用任何权限控制的话，就算使用了用户登录功能，假如我们需求是当用户登录成功之后才能看其他的页面。但是如果不用任何权限控制，我们用户就算登录失败，可以直接在url地址中输入需要跳转页面路由，则就会看到不许要被看到的内容。

所以：上述情况下，我们需要通过路由守卫来达到我们的目的。

通过angular的路由守卫，就可以设置权限验证，当用户登录成功之后，才能跳转到其他的页面，否则只能跳转到用户登录界面等待用户登录。

使用方式：
通过angular官网提供的CanActivate: 要求认证进行认证。

应用程序通常会根据访问者来决定是否授予某个特性区的访问权。 你可以只对已认证过的用户或具有特定角色的用户授予访问权，还可以阻止或限制用户访问权，直到用户账户激活为止。

• CanActivate: 处理导航到某路由的情况。
• CanDeactivate: 处理从当前路由离开的情况。
• Resolve: 在路由激活之前获取路由数据。

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();
    }
    //第一个参数 范型类型的组件
    //根据当前要保护组件 的状态 判断当前用户是否能够离开
    canDeactivate(component: ProductComponent){
        return window.confirm('你还没有保存，确定要离开吗？');
    }
    checkLogin(): boolean {
        // 判断本地有没有token
        const token = sessionStorage.getItem('access_token');
        // 如果token有值，表示登录成功，继续跳转，否则跳转到首页
        if (token) { return true; }
        this.router.navigate(['/login']);
        return false;
    }
}

在路由里面配置app-routing.module.ts中配置