分析Angular路由守卫Route Guards

这篇文章主要介绍“分析Angular路由守卫Route Guards”，在日常操作中，相信很多人在分析Angular路由守卫Route Guards问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”分析Angular路由守卫Route Guards”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！环境:Angular CLI: 11.0.6Angular: 11.0.7Node: 12.18.3npm : 6.14.6IDE: Visual Studio Code在我们的实际的业务开发过程免费云主机、域名中，我们经常会遇到如下需求：需要限制某些 URL 的可访问性，例如，对于系统管理界面，只有那些拥有管理员权限的用户才能打开。当用户处于编辑界面时，在没有保存就离开时，需要提示用户是否放弃修改。针对以上场景，Angualr使用路由守卫（Route Guards）来实现。1. 创建路由守卫Angular CLI提供了命令行工具，可以快速创建路由守卫框架文件：ng generate guard auth。 执行后，Angular CLI会问我们需要实现哪些接口，我们直接勾选即可：说明：CanActivate: 控制路由是否可以激活CanActivateChild: 控制子路由是否可以激活CanDeactivate: 控制路由是否可以退出CanLoad: 控制模块（module）是否可以被加载比较经常使用的是1、3，分别控制进入和退出。 按照上面配置，AngularCLI自动生成如下代码，return true; 替换为我们实际的代码即可。return false; 表示不允许跳转，或者取消离开当前页面。在canActivate方法中，我们还可以使用跳转。如页面判断是否已经登录，如果没有登录，跳转到Login页面：2. 控制路由是否可以激活控制路由是否可以激活，需要定义在定义路由的地方，增加canActivate属性。如果需要，还可以增加data属性， 比如告诉我们的AuthGuard进入当前路由需要验证哪些权限。data属性是可选的。3. 控制路由是否退出（离开）和控制路由是否可以激活类似，在路由定义出增加 canDeactivate，并制定相应的Guard守卫即可。这里不再举例到此，关于“分析Angular路由守卫Route Guards”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注云技术网站，小编会继续努力为大家带来更多实用的文章！

相关推荐: vue中如何使用socket

这篇“vue中如何使用socket”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“vue中如何使用socket”文章吧。 WebSocket是一种…