Angular NgRx：能否在init动作执行前运行代码？

要在页面刷新后恢复NgRx状态，同时避免将store暴露在sessionStorage中，并且在refresh与ngrx init之间执行代码，你可以借助Angular的APP_INITIALIZER机制，配合更隐蔽的客户端存储方案（比如IndexedDB）来实现，具体步骤如下：

1. 实现基于IndexedDB的状态存储服务 #

IndexedDB是浏览器提供的本地存储方案，相比sessionStorage更隐蔽，不会直接暴露在开发者工具的Storage面板中（仍可通过DevTools的Application面板查看，但支持加密存储进一步提升安全性）。下面是封装的存储服务示例：

import { Injectable } from '@angular/core';
import { openDB, IDBPDatabase } from 'idb';

@Injectable({ providedIn: 'root' })
export class StatePersistenceService {
  private dbPromise: Promise<IDBPDatabase>;

  constructor() {
    // 初始化IndexedDB数据库
    this.dbPromise = openDB('ngrx-state-db', 1, {
      upgrade(db) {
        db.createObjectStore('state-store');
      },
    });
  }

  // 保存状态到IndexedDB
  async saveState(state: any): Promise<void> {
    const db = await this.dbPromise;
    await db.put('state-store', state, 'app-state');
  }

  // 从IndexedDB加载状态
  async loadState(): Promise<any | null> {
    const db = await this.dbPromise;
    return db.get('state-store', 'app-state');
  }

  // 清空存储的状态
  async clearState(): Promise<void> {
    const db = await this.dbPromise;
    await db.delete('state-store', 'app-state');
  }
}

2. 用APP_INITIALIZER在NgRx初始化前加载状态 #

APP_INITIALIZER会在Angular应用初始化（包括NgRx Store创建）之前执行，正好满足你在ngrx init前加载状态的需求。我们可以通过它加载之前保存的状态，作为NgRx Store的初始状态：

import { NgModule, APP_INITIALIZER } from '@angular/core';
import { StoreModule } from '@ngrx/store';
import { reducers } from './reducers';
import { StatePersistenceService } from './state-persistence.service';

// 加载初始状态的工厂函数
export async function loadInitialState(persistenceService: StatePersistenceService) {
  return persistenceService.loadState();
}

@NgModule({
  imports: [
    StoreModule.forRoot(reducers, {
      // 将加载的状态作为Store初始状态
      initialState: loadInitialState,
    }),
  ],
  providers: [
    StatePersistenceService,
    {
      provide: APP_INITIALIZER,
      useFactory: loadInitialState,
      deps: [StatePersistenceService],
      multi: true,
    },
  ],
})
export class AppModule {}

3. 监听状态变化自动保存 #

要实现状态的持久化，需要监听NgRx Store的变化，将需要保存的状态同步到IndexedDB中：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Store } from '@ngrx/store';
import { StatePersistenceService } from './state-persistence.service';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-root',
  template: '<router-outlet></router-outlet>',
})
export class AppComponent implements OnInit, OnDestroy {
  private stateSubscription: Subscription | null = null;

  constructor(
    private store: Store,
    private persistenceService: StatePersistenceService
  ) {}

  ngOnInit(): void {
    // 监听Store状态变化，仅保存需要恢复的部分状态（避免冗余）
    this.stateSubscription = this.store.subscribe((state) => {
      const stateToSave = {
        auth: state.auth,
        // 按需添加需要持久化的状态分支
      };
      this.persistenceService.saveState(stateToSave);
    });
  }

  ngOnDestroy(): void {
    this.stateSubscription?.unsubscribe();
  }
}

可选：加密存储提升安全性 #

如果需要进一步避免状态被读取，可以在保存和加载时添加加密逻辑（示例使用crypto-js）：

// 修改StatePersistenceService的saveState和loadState方法
import * as CryptoJS from 'crypto-js';

// 密钥建议从环境变量获取，不要硬编码
const SECRET_KEY = import.meta.env.NG_APP_STATE_ENCRYPT_KEY;

async saveState(state: any): Promise<void> {
  const encryptedState = CryptoJS.AES.encrypt(JSON.stringify(state), SECRET_KEY).toString();
  const db = await this.dbPromise;
  await db.put('state-store', encryptedState, 'app-state');
}

async loadState(): Promise<any | null> {
  const db = await this.dbPromise;
  const encryptedState = await db.get('state-store', 'app-state');
  if (!encryptedState) return null;
  const bytes = CryptoJS.AES.decrypt(encryptedState, SECRET_KEY);
  return JSON.parse(bytes.toString(CryptoJS.enc.Utf8));
}

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