Angular Auth Guard配置后登录成功无法跳转到目标路由问题咨询

问题根因 #

1. Auth Guard逻辑错误：canLoad方法不管登录状态是否合法，最终都会返回true。当未登录时你触发了跳转到根路径的逻辑，但返回true会让路由继续执行懒加载模块的加载逻辑，两个跳转行为冲突直接导致路由卡死。
2. 登录后跳转时机错误：当前登录逻辑中先执行路由跳转，再调用SetUserData写入localStorage。而Auth Guard的登录状态判断完全依赖localStorage中的用户信息，跳转触发Auth Guard校验时，localStorage还没写入用户数据，导致校验失败触发跳回根路径，两次跳转冲突最终表现为地址栏无变化、跳转失败。你遇到的偶现成功就是刚好SetUserData写入速度快于Auth Guard校验速度的特殊情况。

修复方案 #

1. 修复Auth Guard的canLoad逻辑 #

未登录跳转后要返回false终止当前路由流程，避免路由冲突：

canLoad(route: Route, segments: UrlSegment[]): Observable<boolean> | Promise<boolean> | boolean  {
  if (this.authService.isLoggedIn !== true) {
    this.router.navigateByUrl('/')
    // 未登录时终止当前路由
    return false;
  }
  return true;
}

2. 调整登录逻辑的执行顺序 #

将跳转操作放到SetUserData写入localStorage完成之后执行：
如果你的SetUserData是同步方法，直接调整顺序即可：

signIn(email: string, password: string) {
    return this.afAuth.signInWithEmailAndPassword(email, password)
      .then((result) => {
        // 先写入用户数据到localStorage
        this.SetUserData(result.user);
        this.ngZone.run(() => {
          this.isLoggedIn$.next(true);
          console.log('Sign in method...');
          // 写入完成后再跳转
          this.router.navigateByUrl('/home');
        });
      }).catch((error) => {
        window.alert(error.message)
      })
  }

如果SetUserData是异步方法，要等它执行完成再跳转：

// 先修改SetUserData返回Promise
SetUserData(user) {
  // 原有逻辑不变
  return Promise.resolve();
}

// 登录方法中等待写入完成再跳转
signIn(email: string, password: string) {
    return this.afAuth.signInWithEmailAndPassword(email, password)
      .then(async (result) => {
        await this.SetUserData(result.user);
        this.ngZone.run(() => {
          this.isLoggedIn$.next(true);
          console.log('Sign in method...');
          this.router.navigateByUrl('/home');
        });
      }).catch((error) => {
        window.alert(error.message)
      })
  }

可选优化 #

如果需要对已加载的懒加载模块也做登录状态校验，可以额外给路由加上canActivate守卫，避免用户登录过期后还能操作已加载的模块页面。

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