Angular router.navigate w/ route guard 在组件上时不起作用

Posted 2023-03-13

【中文标题】Angular router.navigate w/ route guard 在组件上时不起作用

【英文标题】：Angular router.navigate w/ route guard not working when already on Component

【发布时间】：2017-09-28 07:33:05

【问题描述】：

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

【参考方案1】：

为什么它应该导航它已经在 [' '] 并且您再次要求转到 [' ']？你可以在注销时调用'this.router.navigate(['/login'])'。

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

【讨论】：

是的，使用 /login 似乎是解决方案。我猜你不能尝试导航到你已经在的路线。不是经过同样的流程吗？

【参考方案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  

【讨论】：

完美，为我工作。它重新运行了警卫，这就是我想要的。谢谢！

runGuardsAndResolvers，感谢您提供的信息