angular 路由守卫优先级

最新推荐文章于 2025-05-12 12:39:13 发布

Rulelur

最新推荐文章于 2025-05-12 12:39:13 发布

阅读量494

点赞数

CC 4.0 BY-SA版权

文章标签： angular2

本文链接：https://blog.youkuaiyun.com/Rulelur/article/details/118077142

本文探讨在Angular应用中，如何处理多个异步路由守卫的优先级问题。场景包括用户登录验证和权限检查。在Angular7+中，父路由守卫优先级高于子路由，同时canActivateChild数组中的前一个守卫优先级高于后一个。这种优先级设置确保了在守卫请求完成之前，页面不会加载，从而避免了白屏现象。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

假设这样一种需要用到两个异步路由守卫场景

1.需要判定用户登录了没有，如果没有需要跳转登录页面（login）

2.如果用户登录了，判断用户有没有权限，如果没权限，则跳转到访问拒绝（deny）

多个路由守卫的优先级（angular7+支持）

父路由守卫的优先级比子的高
canActivateChild数组前面的路由守卫比后面的拥有更高的优先级
优先级高的意思是即使UserGuard异步请求先回来，也要等LoginGuard的请求回来才决定跳转哪个页面（等待过程是白屏）

canActivateChild: [LoginGuard, UserGuard],

	LoginGuard返回true	LoginGuard返回跳转
UserGuard返回true	该页面可以正常访问	跳转login页面
UserGuard返回跳转	跳转deny页面	跳转login页面

LoginGuard

import { Injectable } from '@angular/core';
import { CanActivateChild, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree, Router } from '@angular/router';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class LoginGuard implements CanActivateChild {
  constructor(private router: Router) { }

  canActivateChild(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Promise<boolean | UrlTree> | boolean | UrlTree {
    console.log('login路由守卫');
    return new Promise((resolve, reject) => {
      this.getLogin().then(res => {
        if (res) {
          resolve(true);
        } else {
          console.log('跳转到login');
          resolve(this.router.parseUrl('/user/login'));
        }
      });
    });
  }

  // 用settimeout模拟异步请求
  getLogin(): Promise<boolean> {
    const timeout = 2000;
    const isLogin = false;
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve(isLogin);
      }, timeout);
    });
  }
}

UserGuard

import { Injectable } from '@angular/core';
import { CanActivateChild, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree, Router } from '@angular/router';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class UserGuard implements CanActivateChild {
  constructor(private router: Router) { }

  canActivateChild(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Promise<boolean | UrlTree> | boolean | UrlTree {
    console.log('user路由守卫');
    return new Promise((resolve, reject) => {
      this.getUser().then(res => {
        if (res) {
          resolve(true);
        } else {
          console.log('跳转到deny');
          resolve(this.router.parseUrl('/user/deny'));
        }
      });
    });
  }

  // 用settimeout模拟异步请求
  getUser(): Promise<boolean> {
    const timeout = 1000;
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve(false);
      }, timeout);
    });
  }

}

代码库 url