如何阻止NgxsStoragePluginModule持久化AuthState的authError字段

刚好我之前也碰到过类似的需求，给你几个实用的解决方案，你可以根据自己的场景选择：

方案一：自定义存储序列化器（推荐） #

这是NGXS官方支持的方式，可以精准控制哪些字段被持久化，完全符合你不想把authError存入本地存储的需求。

步骤1：实现自定义序列化器 #

创建一个序列化器类，在序列化时剔除authError字段，反序列化时也确保该字段重置为null：

import { StorageSerializer } from '@ngxs/storage-plugin';

export class AuthStateSerializer implements StorageSerializer {
  serialize(state: any): string {
    // 克隆状态对象，避免修改原状态
    const clonedState = { ...state };
    
    // 如果auth状态存在，清除authError字段后再序列化
    if (clonedState.auth) {
      clonedState.auth = { ...clonedState.auth, authError: null };
    }
    
    return JSON.stringify(clonedState);
  }

  deserialize(stateString: string): any {
    const parsedState = JSON.parse(stateString);
    
    // 反序列化时强制把authError设为null
    if (parsedState.auth) {
      parsedState.auth.authError = null;
    }
    
    return parsedState;
  }
}

步骤2：在模块中配置序列化器 #

修改你的AppModule，把自定义序列化器传给Storage插件：

import { NgxsStoragePluginModule } from '@ngxs/storage-plugin';
import { AuthStateSerializer } from './path-to-your-serializer';

@NgModule({
  imports: [
    NgxsModule.forRoot([AuthState]),
    NgxsStoragePluginModule.forRoot({
      serializer: AuthStateSerializer
    })
  ]
})
export class AppModule {}

这样无论登录失败后authError被设为什么值，都会在持久化时被清除，刷新页面后自然不会显示错误信息。

方案二：利用NGXS生命周期钩子重置字段 #

你之前尝试过ngxsOnInit无效，大概率是因为这个钩子在存储插件加载状态之前就执行了。试试这两个更合适的时机：

方法1：监听StorageLoadSuccess动作 #

这个动作是存储插件完成所有状态加载后触发的，此时重置authError刚好能覆盖从本地存储加载的值：

import { State, Action, StateContext } from '@ngxs/store';
import { StorageLoadSuccess } from '@ngxs/storage-plugin';

@State<AuthStateModel>({ name: 'auth', defaults: { authError: null /* 其他字段 */ } })
export class AuthState {
  // 当存储加载完成后重置authError
  @Action(StorageLoadSuccess)
  resetAuthErrorAfterStorageLoad(ctx: StateContext<AuthStateModel>) {
    ctx.patchState({ authError: null });
  }

  // 你的LoginWithPasswordAction逻辑保持不变
  @Action(LoginWithPasswordAction) 
  async loginWithPassword(ctx: StateContext<AuthStateModel>, action: LoginWithPasswordAction) {
    // ... 原有代码
  }
}

方法2：使用ngxsAfterBootstrap钩子 #

这个钩子会在应用完全启动后执行，也能确保状态已经从存储中加载完毕：

import { State, NgxsAfterBootstrap, StateContext } from '@ngxs/store';

@State<AuthStateModel>({ name: 'auth', defaults: { authError: null /* 其他字段 */ } })
export class AuthState implements NgxsAfterBootstrap {
  ngxsAfterBootstrap(ctx: StateContext<AuthStateModel>) {
    ctx.patchState({ authError: null });
  }

  // ... 其他动作逻辑
}

方案三：拆分临时状态到独立State #

如果前面的方案你觉得太复杂，可以把authError这类临时UI状态拆分到一个不持久化的独立State中，比如AuthUiState：

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

interface AuthUiStateModel {
  authError: string | null;
}

@State<AuthUiStateModel>({
  name: 'authUi',
  defaults: { authError: null },
  // 不需要配置持久化，默认不会被存储
})
export class AuthUiState {}

然后在登录失败时更新这个State的authError，这样页面刷新后这个临时状态就会重置为默认值，完全符合你的需求。

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