React浏览器刷新后RxJS BehaviorSubject返回NULL的解决方案咨询

问题核心是页面刷新后内存中的BehaviorSubject状态丢失，初始值重置为null，而此时还未触发login/refreshToken更新用户数据，导致authHeader无法获取有效用户信息。以下是具体解决方案：

1. 持久化用户数据到本地存储 #

修改user.service.js，在初始化时从localStorage读取用户数据，同时封装更新方法同步更新Subject与本地存储：

import { BehaviorSubject } from "rxjs";

// 初始化时优先从localStorage恢复用户数据
const storedUser = localStorage.getItem('user');
const userSubject = new BehaviorSubject(storedUser ? JSON.parse(storedUser) : null);

export const userService = {
  user: userSubject.asObservable(),
  get userValue() {
    return userSubject.value;
  },
  // 同步更新Subject与本地存储
  setUser: (user) => {
    userSubject.next(user);
    localStorage.setItem('user', JSON.stringify(user));
  },
  // 清除用户数据
  clearUser: () => {
    userSubject.next(null);
    localStorage.removeItem('user');
  }
};

2. 更新登录与刷新Token逻辑 #

修改login和refreshToken方法，使用封装的setUser同步更新存储：

function login(params) {
  return fetchWrapper.post(`${baseUrl}/authenticate`, params).then((user) => {
    if (!user || typeof user !== "object") {
      throw new Error("Email or password is incorrect");
    }
    userService.setUser(user);
    startRefreshTokenTimer();
    return user;
  });
}

function refreshToken() {
  return fetchWrapper.post(`${baseUrl}/refresh-token`, {}).then((user) => {
    if (user?.email) {
      userService.setUser(user);
      startRefreshTokenTimer();
      return user;
    }
    // 刷新失败时清除无效用户数据
    userService.clearUser();
  });
}

3. 应用初始化时校验Token有效性 #

在应用入口（如main.js或根组件）添加逻辑，启动时检查本地存储的Token是否过期，自动刷新或清除无效数据：

import { userService } from "./features/users/user.service";

let refreshTokenTimeout;

function startRefreshTokenTimer() {
  const user = userService.userValue;
  if (!user?.jwtToken) return;
  
  const jwtToken = JSON.parse(atob(user.jwtToken.split(".")[1]));
  const expires = new Date(jwtToken.exp * 1000);
  const timeout = expires.getTime() - Date.now() - 60 * 1000;
  
  refreshTokenTimeout = setTimeout(() => {
    userService.refreshToken().catch(() => userService.clearUser());
  }, timeout);
}

// 应用启动时初始化
const initialUser = userService.userValue;
if (initialUser) {
  const jwtToken = JSON.parse(atob(initialUser.jwtToken.split(".")[1]));
  const expires = new Date(jwtToken.exp * 1000);
  
  // Token已过期则立即刷新，否则启动定时器
  if (expires.getTime() < Date.now()) {
    userService.refreshToken().catch(() => userService.clearUser());
  } else {
    startRefreshTokenTimer();
  }
}

4. 恢复同步AuthHeader逻辑 #

现在初始化时userSubject已有本地存储的用户数据，无需异步等待，改回同步的authHeader：

import { userService } from "../features/users/user.service";
import { config } from "./config";

export const fetchWrapper = {
  post,
};

function post(url, body) {
  const requestOptions = {
    method: "POST",
    headers: { "Content-Type": "application/json", ...authHeader(url) },
    credentials: "include",
    body: JSON.stringify(body),
  };
  return fetch(url, requestOptions).then(handleResponse);
}

function authHeader(url) {
  const user = userService.userValue;
  const isLoggedIn = user && user.jwtToken;
  const isApiUrl = url.startsWith(config.apiUrl);
  
  if (isLoggedIn && isApiUrl) {
    return { Authorization: `Bearer ${user.jwtToken}` };
  } else {
    return {};
  }
}

async function handleResponse(response) {
  // 保持原有的响应处理逻辑
}

关键原理说明 #

• 本地存储持久化：解决页面刷新后内存状态丢失的问题，确保初始化时能立即获取用户数据。
• 同步更新机制：每次用户数据变化时，同时更新BehaviorSubject与本地存储，保证两者状态一致。
• 启动时Token校验：避免使用过期Token，自动刷新或清除无效数据，确保AuthHeader始终携带有效凭证。

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