Javascript 角度路由器。导航，带已在组件上的路由防护不工作

我正在试图弄清楚为什么下面的router.navigate（[''）代码不能将用户带到登录组件。我只是呆在家里。当我添加调试器时；对于代码来说，它似乎进入了某种无止境的循环

以下是流程： 由于路由保护失败，用户来到站点并立即被重定向到/登录。如果他们登录，Route Guard将通过，并转到['''这是HomeComponent。然后，当他们单击“注销”时，我想导航到[“”]应该失败，只需转到/login即可。由于某些原因，它停留在HomeComponent上，从不进行导航

home.component.ts

  logout() {
    this.userService.logout();
    this.router.navigate(['']);
  }

  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;
  }

const routes: Routes = [
    { path: '' , component: HomeComponent, canActivate: [UserService]},
    { path: 'login', component: LoginComponent },
    { path: 'register', component: RegisterComponent },
    { path: '**' , redirectTo: '' }
];

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 { }

user.service.ts

  logout() {
    this.userService.logout();
    this.router.navigate(['']);
  }

  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;
  }

const routes: Routes = [
    { path: '' , component: HomeComponent, canActivate: [UserService]},
    { path: 'login', component: LoginComponent },
    { path: 'register', component: RegisterComponent },
    { path: '**' , redirectTo: '' }
];

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 { }

应用程序路由.module.ts

  logout() {
    this.userService.logout();
    this.router.navigate(['']);
  }

  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;
  }

const routes: Routes = [
    { path: '' , component: HomeComponent, canActivate: [UserService]},
    { path: 'login', component: LoginComponent },
    { path: 'register', component: RegisterComponent },
    { path: '**' , redirectTo: '' }
];

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 { }

---

为什么它应该导航它已经在['''中，而您又要求转到[''']？您可以在注销时调用'this.router.navigate（['/login']）

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

}

---

对于使用Angular 5+的用户，您可以使用router.navigate（[''）重新加载相同的URL。它没有很好的文档记录，并且来自像.NET这样的服务器密集型框架，这感觉更自然

将RunGuardsandResolver:“始终”添加到路径之一，并将OnNameUrlNavigation:“重新加载”添加到RouterModule初始化

应用程序路由.module.ts

  logout() {
    this.userService.logout();
    this.router.navigate(['']);
  }

  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;
  }

const routes: Routes = [
    { path: '' , component: HomeComponent, canActivate: [UserService]},
    { path: 'login', component: LoginComponent },
    { path: 'register', component: RegisterComponent },
    { path: '**' , redirectTo: '' }
];

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 { }

---

是的，使用/login似乎是解决方案。。我猜你不能尝试导航到你已经在上面的路线。它不是经过同样的过程吗？很好，对我有用。它重新管理了警卫，这正是我想要的。谢谢Runguard和Resolver，感谢您提供的信息