Angular路由守卫（Route Guards）的学习之路是怎样的？

本文共计919个文字，预计阅读时间需要4分钟。

本章节带大家了解Angular中的路由守卫（Route Guards），介绍如何创建路由守卫、控制路由是否可激活以及如何控制路由退出。希望对大家有所帮助！

环境：Angular CLI：11.0.6

本篇文章带大家了解一下Angular中的路由守卫（Route Guards），介绍一下创建路由守卫、控制路由是否可以激活、控制路由是否退出的方法，希望对大家有所帮助！

环境:

• Angular CLI: 11.0.6

• Angular: 11.0.7

• Node: 12.18.3

• npm : 6.14.6

• IDE: Visual Studio Code

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

• 需要限制某些 URL 的可访问性，例如，对于系统管理界面，只有那些拥有管理员权限的用户才能打开。

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

针对以上场景，Angualr使用路由守卫（Route Guards）来实现。

路由守卫（Route Guards）

1. 创建路由守卫

Angular CLI提供了命令行工具，可以快速创建路由守卫框架文件：ng generate guard auth。