angular7中路由守卫

雨点打透心脏的1/2处 2022-02-17 01:14 251阅读 0赞

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

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

**路由里面配置**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70]: /images/20220217/923b48dab6474ffe8b41c01df05afe9a.png