Angular Router.Navigate W/ Route Guard在组件上已经无法工作

Question

我试图弄清楚为什么以下router.navigate([''](代码不会将用户带到登录组件。我只是留在家庭组件上。当我添加调试器时；对于代码，似乎它变成了某种无尽的循环。

这是过程：用户进入站点，并且由于路线防护局失败，因此立即将其重定向到/登录。如果他们登录，路线守卫会通过，然后将其转到['']，即寄宿家庭。然后，当他们单击注销时，我认为导航到['']应该失败，然后只需登录/登录即可。由于某种原因，它留在家庭成分上，从不导航。

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: '' }
];

Answer 1

对于使用Angular 5 的人，您可以将Router.navigate(['''](放到 Reload 相同的URL。它的记录不佳，来自等级的服务器重型框架，这感觉更自然。

添加了runguardsandresolvers："始终"到您的一条路径和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 { }

Answer 2

为什么它应该导航它已经在['']中，然后再次问['']？您可以在注销中调用'this.router.navigate(['/login'](。

logout() {
   this.userLoggedIn = false;
   this.router.navigate(['/login']);
}