angular 路由守卫优先级

最新推荐文章于 2024-01-16 17:09:02 发布

Rulelur

最新推荐文章于 2024-01-16 17:09:02 发布

阅读量416

点赞数

文章标签： angular2

本文链接：https://blog.csdn.net/Rulelur/article/details/118077142

版权

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

摘要由CSDN通过智能技术生成

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

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

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

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

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

canActivateChild: [LoginGuard, UserGuard],

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