求助：NGXS搭配SSR出现用户数据跨用户泄露问题

核心原因 #

Node.js单线程环境下，NGXS的状态存储是全局单例，若未在请求间重置状态，前一个用户的SSR数据会被后续请求复用，导致hydration完成前闪现旧用户信息。

解决方案 #

1. 服务器端请求前置重置状态

在server.ts的请求处理逻辑中，每次请求到达时先清空状态存储，确保每个请求从干净的状态开始渲染：

import { Store } from '@ngxs/store';

// 处理所有路由请求
server.get('*', (req, res) => {
  const store = app.injector.get(Store);
  // 清空全部状态
  store.reset({});
  // 若只需重置用户相关模块，可触发自定义重置动作
  // store.dispatch(new ResetUserState());

  // 继续SSR渲染流程
  res.render(indexHtml, {
    req,
    providers: [
      { provide: APP_BASE_HREF, useValue: req.baseUrl }
    ],
  });
});

2. 客户端hydration前屏蔽敏感内容

通过平台判断控制敏感组件的渲染时机，避免服务器渲染的旧数据在客户端hydration完成前显示：

import { Component, Inject, PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';
import { Select, Store } from '@ngxs/store';
import { Observable } from 'rxjs';
import { UserState, LoadCurrentUser } from './store/user.state';

@Component({
  selector: 'app-user-info',
  template: `
    <div *ngIf="isBrowser && (user$ | async)">
      {{ (user$ | async).nickname }}
    </div>
    <div *ngIf="!isBrowser">
      加载中...
    </div>
  `
})
export class UserInfoComponent {
  @Select(UserState.getCurrentUser) user$: Observable<any>;
  isBrowser = isPlatformBrowser(this.platformId);

  constructor(
    @Inject(PLATFORM_ID) private platformId: Object,
    private store: Store
  ) {}

  ngOnInit() {
    if (this.isBrowser) {
      // 客户端初始化时拉取当前用户数据
      this.store.dispatch(new LoadCurrentUser());
    }
  }
}

3. 确保NGXS状态的请求级隔离

在app.server.module.ts中，确认NGXS模块随每个请求重新初始化（Angular SSR默认会为每个请求创建新模块实例，但需避免手动共享状态实例）：

@NgModule({
  imports: [
    AppModule,
    ServerModule,
    NgxsModule.forRoot([UserState, ...otherStates])
  ],
  bootstrap: [AppComponent]
})
export class AppServerModule {}

4. 验证状态隔离效果

在服务器端重置状态后打印快照，确认每个请求的初始状态为空：

// server.ts请求处理逻辑中
store.reset({});
console.log('当前请求初始状态:', store.snapshot());

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