带有 canActivate / redirectTo 的 Angular Router 无限循环

Question

我的路由模块无法正常工作，而在 CanActivate 中添加 AuthGuard 会使它更加复杂。这是一个简化的路由器：

const routes: Routes = [
  {
    path: 'login',
    component: LoginComponent,
  },
  {
    path: 'home',
    component: HomeComponent,
  },
  {
    path: 'secret',
    component: SecretComponent,
    canActivate: [ AuthGuard ]
  },
  { path: '', redirectTo: '/home', pathMatch: 'full' },
];

使用当前的设置，我得到了一些奇怪的行为。每条路由都被认为是path: '' 路由的子路由，所以去 '' 会把你带到 '/home'。如果我刷新页面，我会转到“/home/home”。这也适用于登录 - 导航到“/login”实际上会将您带到“/login/home”。如果在将额外的“/home”附加到末尾后刷新这些页面中的任何一个，则会导致页面出错。

authguard 只是另一个复杂功能，它根据身份验证状态导航用户。

我尝试过的事情：

• 删除 authguard
• 更改路径声明的顺序
• 只有一个路径 + 空白路径重定向到它
• pathMatch: 'prefix'
• 使用 '**' 作为重定向路由
• 升级到 Angular 12
• 删除/重新创建整个路由模块

我将其与一些正常运行的生产项目、示例教程等进行比较。一切似乎都已到位。不知道出了什么问题。

注意：该项目在 Angular 9 中出于某种原因，我刚刚注意到，即使我最近才完成它。可能值得尽早更新，但我认为这与问题无关。

更新：我更新到 Angular 12，它没有任何效果。实际上我注意到没有路线在工作。所以导航到 /secret 或 /login 什么都不做。

这是一个新的配置：

    const routes: Routes = [
  {
    path: 'login',
    component: LoginComponent,
  },
  {
    path: '',
    component: HomeComponent,
  },
  {
    path: 'secret',
    component: SecretComponent,
    canActivate: [ AuthGuard ]
  },
];

使用该布局，我可以导航到 '' 并看到 home 组件。如果我导航到“/login”，我会看到 home 组件。如果我单击调用this.router.navigate(['/', 'login']); 的按钮，则页面现在位于“/login”并显示登录组件。如果我刷新那个页面，我就会看到 home 组件，同时仍然在之前显示登录组件的同一条“/login”路径上。我很困惑。

每当我导航到某个路由时，例如“localhost:4200/login”，它都会将 URL 更改为“localhost:4200/login/”。如果我使用该 url 刷新或在末尾使用斜杠重新导航到该 url，我会在控制台中看到许多 404 错误，并且应用程序模板中没有任何内容加载。（例如页脚组件。）

更新 2： 我创建了一个新的 Angular 项目，并且具有基本完全相同的路线设置，并且一切都按预期运行。我不知道只是重新创建所有内容是否是正确的下一步，但这看起来非常诱人。

Answer 1

尝试像这样设置您的路线：

const routes: Routes = [
    { path: 'login', component: LoginComponent, },
    { path: 'home', component: HomeComponent, },
    {
        path: 'secret',
        component: SecretComponent,
        canActivate: [ AuthGuard ]
    },
    { path: '**', redirectTo: '/home' },
];

不要从'' 重定向，只需从'**' 重定向。如果路径只是 https://example.com/，您似乎不希望显示任何内容，所以不要为此添加路由 - '**' 会选择它。