带有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"。这也适用于登录-导航到"/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 ]
},
];

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

每当我导航到一条路线时；localhost:4200/login"；它将把URL改变为"0"；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/，那么您似乎不希望显示任何内容，所以不要为此包含路由——'**'会拾取它。