Angular点击Logout未跳转login页而是跳转portfolio页问题求助

问题排查与解决步骤 #

• 移除Logout项的重复跳转绑定 #

  你在createLinks方法中给Logout配置了['/login']的路由参数，说明你给Logout菜单项同时绑定了routerLink属性和click点击事件触发logout()方法，两个跳转行为会互相冲突。你需要删除Logout对应的NavigationLink中的路由配置，仅保留click事件绑定即可，或者在logout()方法中新增event.preventDefault()阻止默认的routerLink跳转行为。同时确认你已经给Logout菜单项正确绑定了logout()点击事件，避免事件绑定失效导致只触发routerLink的跳转逻辑。

• 核对AuthGuard的实现逻辑 #

  你给根路径配置了AuthGuard守卫，需确认守卫的判断逻辑是否正确：
  • 未登录状态下访问需要权限的路由时，重定向地址必须是/login，不能误写为/portfolio
  • 如果你给login路由配置了反向守卫（已登录用户禁止访问登录页），要保证logout()方法的执行顺序：先调用authenticationService.logout()清除用户登录状态，再执行this.router.navigate(['/login'])跳转，避免反向守卫拦截跳转请求。

• 优化路由配置 #

  你当前的路由配置缺少空路径重定向和无效路径匹配规则，调整为如下配置可避免路由匹配异常：

  const routes: Routes = [
    {
      path: 'login',
      component: LoginComponent,
    },
    {
      path: 'portfolio',
      component: PortfolioComponent,
      canActivate: [AuthGuard],
    },
    {
      path: '',
      redirectTo: '/portfolio',
      pathMatch: 'full'
    },
    {
      path: '**',
      redirectTo: '/portfolio'
    }
  ];
  

内容的提问来源于stack exchange，提问作者user17313117