已經在Component上的Angular router.navigate w / route guard不工作

Question

我試圖弄清楚為什么下面的router.navigate（['']）代碼不會將用戶帶到登錄組件。 我只是留在家庭組件。 當我添加調試器; 在代碼中它似乎進入某種無限循環。

以下是流程：用戶訪問站點並立即重定向到/ login，因為Route Guard失敗。 如果他們登錄，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 { }