我想弄清楚为什么下面的 router.navigate(['']) 代码没有将用户带到登录组件。我只是停留在家庭组件上。当我添加调试器时;对于代码来说,它似乎进入了某种无限循环。
过程如下: 由于 Route Guard 失败,用户来到站点并立即被重定向到/login。如果他们登录,Route Guard 就会通过,然后他们会转到 [' '],这是 HomeComponent。然后,当他们单击注销时,我认为导航到 [' '] 应该会失败,只需转到/login。由于某种原因,它停留在 HomeComponent 上并且从不导航。
home.component.ts
logout() {
this.userService.logout();
this.router.navigate(['']);
}
user.service.ts
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
let url: string = state.url;
return this.verifyLogin(url);
}
verifyLogin(url: string): boolean {
if (this.userLoggedIn) { return true; }
this.router.navigate(['/login']);
return false;
}
logout() {
this.userLoggedIn = false;
}
app-routing.module.ts
const routes: Routes = [
{ path: '' , component: HomeComponent, canActivate: [UserService]},
{ path: 'login', component: LoginComponent },
{ path: 'register', component: RegisterComponent },
{ path: '**' , redirectTo: '' }
];
最佳答案
对于使用 Angular 5+ 的用户,您可以获取 router.navigate(['']) 以重新加载相同的 URL。它没有很好的文档记录,并且来自像 .NET 这样的服务器重框架,这感觉更自然。
将 runGuardsAndResolvers: 'always' 添加到您的路径之一,并将 onSameUrlNavigation: 'reload' 添加到 RouterModule 初始化。
app-routing.module.ts
const routes: Routes = [
{ path: '' , component: HomeComponent, canActivate: [UserService], runGuardsAndResolvers: 'always' },
{ path: 'login', component: LoginComponent },
{ path: 'register', component: RegisterComponent },
{ path: '**' , redirectTo: '' }
];
@NgModule({
imports: [RouterModule.forRoot(routes, {
onSameUrlNavigation: 'reload'
})],
exports: [RouterModule]
})
export class AppRoutingModule { }
关于javascript - Angular router.navigate with/route guard 已经在组件上时不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43709721/