Angular router.navigate w/ 已经在组件上的路由守卫不工作

Question

我想弄清楚为什么下面的 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: '' }
];

Answer 1

为什么它应该导航它已经在 [' '] 中并且您再次询问转到 [' ']？退出时可以调用'this.router.navigate(['/login'])'

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

}

Answer 2

对于那些使用 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 { }

Angular router.navigate w/ 已经在组件上的路由守卫不工作

Angular router.navigate w/ route guard not working when already on Component

javascript

typescript

angular-routing

angular-components

angular