在 Angular 7 应用程序中，重定向是一个常见的需求。无论是在用户访问未授权页面时还是在需要进行授权时，都需要进行重定向。但是，如果不正确地处理重定向，可能会导致各种问题，例如循环重定向、路由不正确等等。因此，在本文中，我们将讨论如何在 Angular 7 应用程序中正确地处理重定向问题。
使用 Angular 7 的守卫
使用 Angular 7 的守卫可以很容易地处理重定向问题。守卫是一种可以用来监控路由器的导航事件的机制，可以访问路由的目标状态和源状态，并可以取消或重定向导航。
创建守卫
在 Angular 7 应用程序中，我们可以使用以下代码来创建守卫：
------ - ---------- - ---- ----------------
------ - ------------ ------- ----------------------- ------------------- - ---- ------------------
-------------
----------- ------
--
------ ----- --------- ---------- ----------- -
------------------- ------- ------- --
------------------ ----------------------- ------ --------------------- ------- -
-- --- --------- --- -
---------------------------------
------ ------
-
------ -----
-
-在这个代码中，我们创建一个名为 AuthGuard 的守卫。这个守卫实现了 CanActivate 接口，它有一个 canActivate 方法，用来判断是否应该允许导航。如果不能导航，它会使用路由器对象来重定向到另一个 URL。
在路由中使用守卫
在我们创建了 AuthGuard 之后，我们需要在路由中使用它。我们可以使用以下代码在路由器中定义守卫：
------ - -------- - ---- ---------------- ------ - ------- ------------ - ---- ------------------ ------ - ------------- - ---- ------------------------ ------ - ---------------- - ---- ------------------------------ ------ - -------------- - ---- -------------------------- ------ - --------- - ---- --------------- ----- ------- ------ - - - ----- --- ---------- ------------- -- - ----- ---------- ---------- ----------------- ------------ ----------- -- - ----- -------- ---------- -------------- -- - ----- ----- ----------- -- - -- ----------- -------- ------------------------------- -------- -------------- -- ------ ----- ---------------- - -
在这个代码中，我们定义了一个名为 routes 的数组，它包含了三个路径（home、profile 和 login）。对于 profile 路径，我们使用 canActivate 属性来告诉路由器使用 AuthGuard 守卫来判断是否可以导航。
守卫中的重定向
在 canActivate 方法中，我们可以使用 router.navigate 方法来重定向到另一个 URL。例如，我们可以在 AuthGuard 守卫中使用以下代码来重定向到登录页面：
-- --- --------- --- - --------------------------------- ------ ------ -
在这个代码中，我们使用 this.router.navigate(['/login']) 语句将用户重定向到登录页面。如果希望取消导航，可以返回 false。
解决重定向循环问题
在处理重定向问题时，最容易出现的问题是循环重定向。例如，如果在 AuthGuard 守卫中尝试重定向到 /profile 页面，而它又需要重定向到 /login 页面才能访问，我们将进入无限重定向循环，导致应用程序崩溃。
为了解决这个问题，我们可以添加一个标志变量来记录重定向次数。例如，我们可以使用以下代码来记录重定向次数：
------- -------------- ------ - --
------------------ ----------------------- ------ --------------------- ------- -
-- ------------------- - -- -
---------------------------------
------ ------
-
-- --- --------- --- -
---------------------
---------------------------------
------ ------
-
------ -----
-在这个代码中，我们使用 redirectCount 变量来记录重定向的次数。如果重定向次数超过 5 次，我们将导航到错误页面。如果没有达到重定向最大次数，并且需要重定向，我们递增 redirectCount 变量，然后使用 this.router.navigate(['/login']) 语句进行重定向。
结论
在本文中，我们已经探讨了如何在 Angular 7 应用程序中正确地处理重定向问题。我们学习了如何使用守卫来监控路由器的导航事件，并且使用重定向来处理未授权访问的问题。我们还学习了如何处理重定向循环问题。希望这篇文章可以帮助您解决 Angular 7 中的重定向问题。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/67022424d91dce0dc8469766