在 Angular 中，路由保护是一种重要的安全措施，可以保护应用程序免受未经授权的访问。通过路由保护，您可以控制哪些用户可以访问特定的路由，以及哪些用户无权访问。
为什么需要路由保护？
在许多应用程序中，某些页面或功能只能由经过身份验证的用户访问。例如，您可能希望只有登录用户才能访问其个人资料页面，或者只有管理员才能访问管理界面。在这些情况下，路由保护可以确保只有经过身份验证的用户才能访问受保护的路由。
如何实现路由保护？
在 Angular 中，您可以使用路由守卫来实现路由保护。路由守卫是一种用于拦截导航请求的 Angular 服务，允许您在导航发生之前或之后执行某些操作。您可以使用路由守卫来检查用户是否有权访问路由，如果没有，则可以重定向用户到其他页面或显示错误消息。
在 Angular 中，有两种类型的路由守卫：CanActivate 和 CanActivateChild。CanActivate 路由守卫用于保护单个路由，而 CanActivateChild 路由守卫用于保护子路由。
下面是一个示例 CanActivate 路由守卫，用于检查当前用户是否已经登录：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ------------ ----------------------- -------------------- -------- ------ - ---- ------------------
------ - ---------- - ---- -------
------ - ----------- - ---- -----------------
-------------
----------- ------
--
------ ----- --------- ---------- ----------- -
------------------- ----- ------------ ------- ------- ------- --
------------
----- -----------------------
------ --------------------- ------------------ - -------- - --------------- - -------- - ------- - ------- -
-- ------------------------ -
------ -----
- ---- -
---------------------------------
------ ------
-
-
-在上面的代码中，AuthGuard 类实现了 CanActivate 路由守卫接口，并注入了一个名为 AuthService 的身份验证服务。在 canActivate 方法中，我们检查当前用户是否已经登录，如果已经登录，则返回 true，允许访问路由。否则，我们重定向用户到登录页面，并返回 false，防止用户访问受保护的路由。
要使用 AuthGuard 路由守卫来保护路由，您需要将其添加到路由定义中，如下所示：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------- ------------ - ---- ------------------ ------ - ------------- - ---- ------------------------ ------ - ---------------- - ---- ------------------------------ ------ - -------------- - ---- -------------------------- ------ - --------- - ---- --------------- ----- ------- ------ - - - ----- --- ---------- ------------- -- - ----- ---------- ---------- ----------------- ------------ ----------- -- - ----- -------- ---------- --------------- ------------ ------------ ----- - ------ --------- - - -- ----------- -------- ------------------------------- -------- -------------- -- ------ ----- ---------------- - -
在上面的代码中，我们将 AuthGuard 路由守卫添加到了 ProfileComponent 和 AdminComponent 路由中，以确保只有经过身份验证的用户才能访问这些路由。我们还使用了 data 属性来指定需要访问 AdminComponent 路由的用户角色。
结论
在 Angular 中，路由保护是一种重要的安全措施，可以确保只有经过身份验证的用户才能访问受保护的路由。通过使用 CanActivate 和 CanActivateChild 路由守卫，您可以轻松地实现路由保护，并控制哪些用户可以访问特定的路由。在实际开发中，您可以根据需要自定义路由守卫，以实现更复杂的路由保护逻辑。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6742e0a299516187acd96b4e