react router路由守卫,vue router 路由守卫

　　本文带你了解Angular中的路由守卫，介绍创建路由守卫、控制路由是否可以激活、控制路由是否退出的方法。希望对你有帮助！

　　在我们实际的业务开发过程中，我们经常会遇到以下需求：

　　有必要限制某些网址的可访问性。比如系统管理界面，只有拥有管理员权限的用户才能打开。【相关教程推荐：《angular教程》】

　　当用户在编辑界面，没有保存就离开时，需要提示用户是否放弃修改。

　　对于上面的场景，Angualr使用路由守卫来实现它。

路由守卫（Route Guards）

　　1. 创建路由守卫

　　Angular CLI提供命令行工具来快速创建路由保护框架文件：ng generate guard auth。执行后，Angular CLI会询问我们需要实现哪些接口，我们可以直接检查它们：

　　？您希望实现哪些接口？(按空格键选择，按a键切换全部，按I键反转选择)

　　(*)可以激活

　　( )可以激活孩子

　　( )可以停用

　　()可以加载描述：

　　CanActivate:控制路线是否可以被激活。

　　CanActivateChild:控制是否可以激活子路由。

　　CanDeactivate:控制路线是否可以退出。

　　CanLoad:控制模块是否可以加载。

　　常用的有1和3，分别控制进入和退出。根据以上配置，AngularCLI自动生成如下代码，返回true只需用我们实际的代码替换它。返回false表示不允许跳转，或者取消离开当前页面。

　　//auth.guard.ts

　　从“@angular/core”导入{ injective }；

　　从“@angular/router”导入{ CanActivate，CanDeactivate，ActivatedRouteSnapshot，RouterStateSnapshot，URL tree }；

　　从“rxjs”导入{ Observable }；

　　@可注射({

　　providedIn:“根”

　　})

　　导出类AuthGuard实现CanActivate，CanDeactivateunknown {

　　能激活(

　　路由：ActivatedRouteSnapshot，

　　state:RouterStateSnapshot):observable boolean URL tree promise boolean URL tree boolean URL tree {

　　返回true

　　}

　　}在canActivate方法中，我们也可以使用jump。如果页面判断您是否已经登录，如果没有，跳转到登录页面：

　　this . router . navigate([/log in ])；

　　返回false2. 控制路由是否可以激活

　　要控制路由是否可以激活，需要定义定义路由的地方，并添加canActivate属性。如果需要，还可以添加数据属性，比如告诉我们的AuthGuard需要验证哪些权限才能进入当前路线。数据属性是可选的。

　　const routes: Routes=[

　　{

　　路径：“第1页”，

　　组件：page 1组件，

　　data:{ permissions:[ your page 1 permission ]}，//向AuthGuard传入参数，可选

　　可以激活：[AuthGuard]

　　},

　　{

　　路径：“第2页”，

　　组件：page 2组件，

　　data:{ permissions:[ your page 2 permission ]}，//向AuthGuard传入参数，可选

　　可以激活：[AuthGuard]

　　}

　　]3. 控制路由是否退出（离开）

　　与控制路由是否可以激活类似，可以在路由定义中添加canDeactivate，并制定相应的Guard guard。这里不再举例。

总结

　　通过路由卫士控制URL的进出；

　　Angular CLI可以帮助我们创建guard文件；

　　有关编程的更多信息，请访问：编程入门！以上是角学习中路线卫士分析的详细内容。更多请关注我们的其他相关文章！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。