Angular Service变量更新后组件及路由守卫无法获取最新值问题

问题根因 #

该异常的核心问题出在UserDetailsService的状态管理逻辑上，常见错误场景有两个：

• 你没有将UserStatus对应的可观察对象设为持久化状态的热可观察对象，如果用了普通Subject而非BehaviorSubject/ReplaySubject，路由守卫作为新订阅者无法拿到之前已经发射的最新状态值
• getUserStatus()方法返回的是服务内独立定义的普通变量，UpdateStatus方法仅更新了可观察对象的发射值，没有同步更新该普通变量，导致两份状态数据不同步

修复步骤 #

第一步：修正UserDetailsService代码 #

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class UserDetailsService {
  // 用BehaviorSubject，初始化默认值，所有新订阅者可以直接拿到最新状态
  private userStatusSubject = new BehaviorSubject<boolean>(false);
  // 对外暴露只读的可观察对象
  public UserStatus = this.userStatusSubject.asObservable();

  // 直接返回当前最新的状态值
  getUserStatus(): boolean {
    return this.userStatusSubject.value;
  }

  // 更新状态时同步修改Subject的值，保证全链路数据一致
  UpdateStatus(status: boolean): void {
    this.userStatusSubject.next(status);
  }
}

第二步：修复路由守卫的逻辑漏洞 #

你当前的canActivateChild方法漏了return false，会导致守卫返回undefined触发路由异常，修正代码如下：

canActivateChild(
  next: ActivatedRouteSnapshot,
  state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    if (this.userDetails.getUserStatus()) {
      return true;
    } else {
      this.router.navigate(['login']);
      // 放开之前注释的return false，避免守卫返回非法值
      return false;
    }
}

可选优化：异步守卫适配 #

如果后续需要支持从后端拉取用户状态做校验，可以直接返回可观察对象，Angular路由守卫原生支持Observable类型返回值：

canActivate(
  next: ActivatedRouteSnapshot,
  state: RouterStateSnapshot): Observable<boolean> {
    return this.userDetails.UserStatus.pipe(
      map(status => {
        if (!status) {
          this.router.navigate(['login']);
        }
        return status;
      })
    )
}

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