Angular 5中Ngrx用户状态页面刷新丢失的持久化方法咨询

嘿，刚搞定登录功能就遇到刷新丢状态的问题，太正常了——毕竟NgRx的store是存在内存里的，一刷新就清空啦！别慌，我给你一步步讲怎么在Angular 5 + NgRx里实现用户状态持久化，都是实战里常用的方法：

首先得选个地方存用户状态，常用的有两种：

• localStorage：持久化存储，哪怕关闭浏览器再打开，数据还在，适合需要长期保持登录的场景
• sessionStorage：会话级存储，关闭标签页就自动清除，适合临时登录的场景
  下面的例子我用localStorage，你可以根据需求换。

NgRx的Reducer负责处理状态变更，我们可以在状态更新后，把最新的用户状态写入存储，同时初始化时从存储里读状态。假设你的认证状态Reducer是authReducer，代码可以改成这样：

import { Action } from '@ngrx/store';
import { AuthActions, AuthActionTypes } from './auth.actions';

// 定义你的认证状态结构
export interface AuthState {
  user: { id: number; username: string; token: string }; // 换成你实际的用户字段
  isAuthenticated: boolean;
}

// 初始化时优先从localStorage读，没有的话用默认状态
const initialState: AuthState = JSON.parse(localStorage.getItem('authState')) || {
  user: null,
  isAuthenticated: false
};

export function authReducer(state = initialState, action: AuthActions): AuthState {
  switch (action.type) {
    case AuthActionTypes.LoginSuccess:
      // 生成新状态
      const loggedInState = {
        ...state,
        user: action.payload,
        isAuthenticated: true
      };
      // 同步到localStorage
      localStorage.setItem('authState', JSON.stringify(loggedInState));
      return loggedInState;
    
    case AuthActionTypes.Logout:
      const loggedOutState = {
        ...state,
        user: null,
        isAuthenticated: false
      };
      localStorage.setItem('authState', JSON.stringify(loggedOutState));
      return loggedOutState;
    
    default:
      return state;
  }
}

这样一来，每次登录/登出后状态都会存在本地，刷新页面时Reducer初始化就会从localStorage读取之前的状态，用户就不会丢失登录状态了。

如果追求最佳实践，Reducer应该是纯函数（只处理状态计算，不做副作用操作），那我们可以把读写localStorage的逻辑放到NgRx Effect里：

首先创建一个Auth Effects类，监听登录成功和登出的Action：

import { Injectable } from '@angular/core';
import { Actions, Effect, ofType } from '@ngrx/effects';
import { tap } from 'rxjs/operators';
import { AuthActionTypes, LoginSuccess, Logout } from './auth.actions';

@Injectable()
export class AuthEffects {
  constructor(private actions$: Actions) {}

  // 这个Effect不需要dispatch新Action，所以设为{ dispatch: false }
  @Effect({ dispatch: false })
  persistAuthState$ = this.actions$.pipe(
    ofType<LoginSuccess | Logout>(AuthActionTypes.LoginSuccess, AuthActionTypes.Logout),
    tap((action) => {
      let authState;
      if (action.type === AuthActionTypes.LoginSuccess) {
        authState = {
          user: action.payload,
          isAuthenticated: true
        };
      } else {
        authState = { user: null, isAuthenticated: false };
      }
      localStorage.setItem('authState', JSON.stringify(authState));
    })
  );
}

然后修改Reducer，去掉里面的localStorage操作，保持纯函数：

const initialState: AuthState = JSON.parse(localStorage.getItem('authState')) || {
  user: null,
  isAuthenticated: false
};

export function authReducer(state = initialState, action: AuthActions): AuthState {
  switch (action.type) {
    case AuthActionTypes.LoginSuccess:
      return {
        ...state,
        user: action.payload,
        isAuthenticated: true
      };
    
    case AuthActionTypes.Logout:
      return {
        ...state,
        user: null,
        isAuthenticated: false
      };
    
    default:
      return state;
  }
}

别忘了在你的AppModule里注册这个Effect哦！

• 序列化问题：JSON.stringify只能序列化普通对象，如果你的用户对象里有函数、Date或者其他不可序列化的属性，存进去会丢失。所以登录成功后，最好只把需要的字段（比如token、用户名、ID）存进去，别存整个用户实例。
• 安全性：localStorage是明文存在浏览器里的，绝对不能存密码这类敏感信息！如果要提高安全性，可以用加密库（比如crypto-js）把用户信息加密后再存，读取时再解密。
• 版本适配：Angular 5对应的NgRx版本大概是4.x，上面的代码是兼容的，如果你的导入路径有问题，调整一下就行（比如@ngrx/effects的导入）。

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