Angular7.x 是一款流行的前端框架，拥有强大的路由功能。在实际开发中，我们经常需要实现登录认证和权限控制。本文将介绍如何使用 Angular7.x 的路由拦截器实现登录认证和权限控制。
路由拦截器
Angular7.x 提供了路由拦截器（Route Guards）的机制，可以在路由导航到某个路由之前或之后执行一些操作。路由拦截器可以用于实现登录认证和权限控制等功能。
路由拦截器有三种类型：
- CanActivate：在路由导航到某个路由之前执行，用于实现登录认证。
- CanActivateChild：在子路由导航到某个路由之前执行，用于实现子路由的登录认证。
- CanDeactivate：在路由导航离开某个路由之前执行，用于实现离开页面时的操作。
本文将主要介绍 CanActivate 和 CanActivateChild。
实现登录认证
在实现登录认证时，我们需要在用户未登录时禁止访问某些页面。我们可以使用 CanActivate 路由拦截器来实现。
首先，我们需要定义一个 AuthGuard 类，实现 CanActivate 接口。在 canActivate 方法中，我们可以通过判断用户是否已登录，来决定是否允许访问该路由。
------ - ---------- - ---- ----------------
------ - ------------ ----------------------- -------------------- ------ - ---- ------------------
-------------
----------- ------
--
------ ----- --------- ---------- ----------- -
------------------- ------- ------- --
----------------- ----------------------- ------ --------------------- ------- -
----- ---------- - -----------------------------------
-- ----------- --- ------- -
------ -----
- ---- -
-------------------------------- - ------------ - ---------- --------- - ---
------ ------
-
-
-在上面的代码中，我们通过 localStorage 来判断用户是否已登录。如果用户已登录，就返回 true，允许访问该路由。如果用户未登录，就跳转到登录页面，并把当前路由的 URL 作为参数传递给登录页面，以便登录成功后跳转回该路由。
接下来，在路由配置中使用 AuthGuard：
------ - -------- - ---- ---------------- ------ - ------- ------------ - ---- ------------------ ------ - ------------- - ---- ------------------------ ------ - -------------- - ---- -------------------------- ------ - --------- - ---- --------------- ----- ------- ------ - - - ----- --- ---------- -------------- ------------ ----------- -- - ----- -------- ---------- -------------- -- -- ----------- -------- ------------------------------- -------- -------------- -- ------ ----- ---------------- - -
在上面的代码中，我们把 AuthGuard 添加到路由的 canActivate 属性中。这样，当用户访问根路由时，会先执行 AuthGuard 的 canActivate 方法，判断用户是否已登录。
实现权限控制
在实现权限控制时，我们需要在用户没有足够权限时禁止访问某些页面。我们可以使用 CanActivateChild 路由拦截器来实现。
首先，我们需要定义一个 RoleGuard 类，实现 CanActivateChild 接口。在 canActivateChild 方法中，我们可以通过判断用户的角色来决定是否允许访问该路由。
------ - ---------- - ---- ----------------
------ - ----------------- ----------------------- -------------------- ------ - ---- ------------------
-------------
----------- ------
--
------ ----- --------- ---------- ---------------- -
------------------- ------- ------- --
---------------------- ----------------------- ------ --------------------- ------- -
----- ---- - -----------------------------
-- ----- --- -------- -
------ -----
- ---- -
-------------------------------
------ ------
-
-
-在上面的代码中，我们通过 localStorage 来获取用户的角色。如果用户的角色是 admin，就返回 true，允许访问该路由。如果用户的角色不是 admin，就跳转到 403 页面，禁止访问该路由。
接下来，在路由配置中使用 RoleGuard：
------ - -------- - ---- ---------------- ------ - ------- ------------ - ---- ------------------ ------ - ------------- - ---- ------------------------ ------ - -------------- - ---- -------------------------- ------ - ------------------ - ---- ---------------------------------- ------ - --------- - ---- --------------- ----- ------- ------ - - - ----- --- ---------- -------------- ------------ ----------- -- - ----- -------- ---------- --------------- ----------------- ----------- -- - ----- ------ ---------- ------------------ -- -- ----------- -------- ------------------------------- -------- -------------- -- ------ ----- ---------------- - -
在上面的代码中，我们把 RoleGuard 添加到路由的 canActivateChild 属性中。这样，当用户访问 admin 路由时，会先执行 AuthGuard 的 canActivate 方法，判断用户是否已登录；然后再执行 RoleGuard 的 canActivateChild 方法，判断用户是否有 admin 角色。
总结
本文介绍了如何使用 Angular7.x 的路由拦截器实现登录认证和权限控制。通过实现 AuthGuard 和 RoleGuard 类，我们可以方便地在路由导航前执行一些操作，并且可以灵活地控制用户的访问权限。希望本文对你有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/65cc3354add4f0e0ff5ab980