Angular 13中，运行时存储用户显示名称、用户ID等共享数据的最佳位置在哪？

1. 单例服务（最常用的轻量方案） #

这是跨组件/模块共享用户数据的首选，尤其适合中小型项目。

• 创建方式：在服务的@Injectable装饰器中设置providedIn: 'root'，确保整个应用只有一个实例：

  @Injectable({ providedIn: 'root' })
  export class UserService {
    private currentUserSubject = new BehaviorSubject<User | null>(null);
    public currentUser$ = this.currentUserSubject.asObservable();
  
    setUser(user: User): void {
      this.currentUserSubject.next(user);
    }
  
    getUser(): User | null {
      return this.currentUserSubject.value;
    }
  }
  

• 使用：在任意组件/模块中注入UserService，通过currentUser$订阅获取响应式数据，或用getUser()直接读取当前值。
• 优点：实现简单、支持响应式更新、全局可访问，无需额外依赖。
• 缺点：页面刷新后数据会丢失，需持久化的话要配合其他存储方案。

2. NgRx Store（大型复杂应用首选） #

如果你的应用有大量共享状态、需要状态追踪/回滚，或是多人协作开发，集中式状态管理的NgRx更合适。

• 核心思路：把用户状态存在全局Store中，通过Action触发状态变更，Reducer处理更新逻辑，组件通过Selector获取数据。
• 示例：定义用户相关的Action、Reducer、Selector，组件中通过store.select(selectCurrentUser)获取用户数据。
• 优点：状态变更可预测、便于调试、支持异步操作（Effects），适配大规模应用的复杂场景。
• 缺点：学习成本高，小项目使用会增加不必要的复杂度。

3. LocalStorage/SessionStorage（需持久化场景） #

如果希望页面刷新或重启应用后用户数据依然保留，浏览器本地存储是合适的选择。

• 使用方式：

  // 存储用户数据
  localStorage.setItem('currentUser', JSON.stringify({ id: 1, displayName: 'John' }));
  // 获取用户数据
  const user = JSON.parse(localStorage.getItem('currentUser') || 'null');
  

• 注意事项：
  • 存储内容为字符串，需用JSON.stringify和JSON.parse处理对象。
  • LocalStorage是持久化存储（除非手动清除），SessionStorage仅在当前浏览器会话有效。
  • 禁止存储敏感数据（如token），易被XSS攻击窃取。
• 通常建议配合单例服务封装：组件只与服务交互，避免直接操作localStorage，降低耦合度。

4. APP_INITIALIZER（应用启动时预加载数据） #

如果用户数据需要在应用启动前加载完成（比如从后端接口获取当前登录用户信息），可以用APP_INITIALIZER完成初始化。

• 实现方式：在根模块的providers中配置初始化函数，调用服务加载用户数据，确保应用启动后数据已就绪：

  export function initUser(userService: UserService) {
    return () => userService.fetchCurrentUser().toPromise();
  }
  
  @NgModule({
    providers: [
      {
        provide: APP_INITIALIZER,
        useFactory: initUser,
        deps: [UserService],
        multi: true
      }
    ]
  })
  export class AppModule {}
  

• 优点：应用启动阶段完成数据加载，组件无需等待异步请求。
• 缺点：如果初始化耗时过长，会拖慢应用启动速度。

总结 #

• 中小型项目、无需复杂状态管理：选单例服务，需持久化则配合LocalStorage。
• 大型复杂应用、需要状态追踪：选NgRx Store。
• 需页面刷新后保留数据：选LocalStorage/SessionStorage（建议配合单例服务封装）。
• 需应用启动前预加载用户数据：用APP_INITIALIZER配合单例服务。

内容的提问来源于stack exchange，提问作者Mahmoud Yehia Alabady