Angular12 BeforeloginService路由授权不响应 页面跳转失效

你的路由跳转被拦截是两个核心问题共同导致的：

1. TokenService逻辑错误导致路由守卫判定异常 #

你在TokenService的get()方法中，当localStorage不存在token时返回空数组[]，而loggedIn()方法仅判断token是否为null：

• 空数组不属于null/undefined，所以即便用户未登录，loggedIn()也会返回true
• 路由守卫BeforeloginService返回!this.Token.loggedIn()即false，直接拦截了路由跳转，所以点击没有反应

2. 路由路径配置不匹配 #

reset-password是Auth模块下LoginComponent的子路由，你在routerLink中写的['/reset-password']是根路径匹配规则，如果你的Auth模块不是直接挂载在根路径下，会导致路由匹配失败。

步骤1：修正TokenService的逻辑错误 #

将get()方法的兜底返回值改为null，保证未登录时loggedIn()返回正确的布尔值：

// TokenService
get(){
  // 不存在token时返回null，而非空数组
  return localStorage.getItem('token') ?? null;
}

同时建议将固定header改为getter，避免后续登录后token更新时header不会同步的问题：

// TokenService 把原来的header属性替换为getter
private get header() {
  return {
    'X-Requested-With' : 'XMLHttpRequest',
    'Authorization' : this.get()
  };
}

步骤2：优化路由守卫逻辑 #

避免守卫直接返回false导致路由无响应，已登录的用户访问登录相关页面时直接跳转到业务页：

// BeforeloginService
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean | Observable<boolean> | Promise<boolean> {
  const isLoggedIn = this.Token.loggedIn();
  if (isLoggedIn) {
    // 替换为你项目的首页/用户中心路径
    this.Token.router.navigate(['/dashboard']);
    return false;
  }
  return true;
}

步骤3：修正routerLink路径 #

如果你的忘记密码按钮在Auth模块的登录页内，使用相对路径匹配子路由即可：

<a [routerLink]="['./reset-password']" routerLinkActive="router-link-active" class="text-light"><small>Forgot password?</small></a>

如果你的Auth模块在根路由中配置了前缀（比如懒加载配置了path: 'auth'），则使用全路径：

<a [routerLink]="['/auth/reset-password']" routerLinkActive="router-link-active" class="text-light"><small>Forgot password?</small></a>

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