Angular11集成谷歌认证登录成功后无法立即跳转内部页问题咨询

1. 组件内的user BehaviorSubject 未在认证后及时更新：你调用setUser(user)时，大概率只把用户信息写入了localStorage，没有给组件内声明的user BehaviorSubject 推送新值，导致myRedirectTo执行时，this.user要么为null，要么this.user.value.ruolo还是旧的空值，判断不满足跳转条件，所以不会执行router.navigate。
2. 跳转逻辑的判断时机存在隐患：你在authenticateGoogle流程结束后立即调用myRedirectTo，如果setUser存在异步逻辑，也会导致判断时用户数据还没完成更新。

你刷新页面后能正常跳转的原因也很明确：刷新后组件重新初始化，初始化阶段会从localStorage读取已存储的用户信息赋值给this.user，此时ngOnInit里调用的myRedirectTo就能拿到正确的角色信息触发跳转。

• 首先补全setUser方法逻辑，确保同时更新本地存储和组件内的user Subject：

setUser(user: User): void {
  // 写入本地存储
  localStorage.setItem('user', JSON.stringify(user));
  // 给组件内的user Subject推送新值
  if (!this.user) {
    this.user = new BehaviorSubject<User>(user);
  } else {
    this.user.next(user);
  }
}

• 可以优化跳转逻辑，监听user的变化自动触发跳转，避免手动调用时机不对的问题：

ngOnInit(): void {
  this.myRedirectTo();
  // 监听user变化自动触发跳转
  this.user?.asObservable().subscribe(user => {
    if (user?.ruolo) {
      this.myRedirectTo();
    }
  })
}

• 额外优化：checkUserRole$方法里不需要临时创建BehaviorSubject取本地存储的值，直接读取即可：

public checkUserRole$(ruolo: string): Promise<User> {
  const baseApiUrl = environment.baseapiUrl;
  const ApiPath = apiRoutes.authCheckAscrittoRuolo;
  const user = JSON.parse(localStorage.getItem("user")) as User;
  user.ruolo = ruolo;
  return this.http.post<User>(`${baseApiUrl}${ApiPath}`, user).toPromise();
}

如果还是存在跳转问题，可以给router.navigate加错误捕获排查路由配置问题：

this.router.navigate([returnUrl]).catch(err => console.log('跳转异常：', err));

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