React中不使用local/sessionStorage如何实现内存会话管理

核心实现逻辑 #

利用ES模块的单例特性，将会话状态存储在模块顶层的私有变量中，整个应用所有导入该模块的位置都会拿到同一个会话实例，组件重渲染、前端路由切换、动态导入都不会重置状态，仅页面刷新时才会清空内存数据。

你之前遇到的类静态属性导入重置的问题，大概率是写法不符合ES模块单例的使用规范，只要在同一个模块下导出的类，所有导入引用的都是同一个类构造函数，静态属性不会因为多次导入重置，除非页面整体刷新。

基础会话模块实现 #

新建session.js作为全局会话管理模块：

// 模块顶层私有状态，外部无法直接修改
let _session = {
  username: null,
  isLoggedIn: false,
  jwt: null // 可扩展存储JWT令牌供请求使用
}

export const session = {
  // 登录成功后设置会话信息
  set(userInfo) {
    _session.username = userInfo.username
    _session.isLoggedIn = true
    _session.jwt = userInfo.jwt
  },
  // 获取会话快照，返回拷贝避免外部直接修改原状态
  get() {
    return { ..._session }
  },
  // 登出时清空会话
  clear() {
    _session = {
      username: null,
      isLoggedIn: false,
      jwt: null
    }
    // 可在此处追加跳转登录页、清空本地缓存等逻辑
  },
  // 快捷获取登录状态，供路由鉴权使用
  isAuthenticated() {
    return _session.isLoggedIn
  }
}

配套功能集成 #

Axios请求集成 #

配置全局请求拦截器自动携带JWT，响应拦截器处理鉴权失败逻辑：

import axios from 'axios'
import { session } from './session'

// 请求拦截器：自动注入JWT请求头
axios.interceptors.request.use(config => {
  const { jwt } = session.get()
  if (jwt) {
    config.headers.Authorization = `Bearer ${jwt}`
  }
  return config
})

// 响应拦截器：401未授权时自动清空会话跳登录
axios.interceptors.response.use(
  res => res,
  err => {
    if (err.response?.status === 401) {
      session.clear()
    }
    return Promise.reject(err)
  }
)

路由鉴权集成 #

Vue Router 示例

import { createRouter } from 'vue-router'
import { session } from './session'

const router = createRouter({
  // 路由配置省略
})

router.beforeEach((to, from, next) => {
  // 需要鉴权的路由配置meta.requiresAuth = true即可
  if (to.meta.requiresAuth && !session.isAuthenticated()) {
    next('/login')
  } else {
    next()
  }
})

React Router 示例

import { Navigate, Outlet } from 'react-router-dom'
import { session } from './session'

// 封装鉴权路由组件
export const ProtectedRoute = () => {
  return session.isAuthenticated() ? <Outlet /> : <Navigate to="/login" replace />
}

// 路由配置中使用
/*
<Route path="/dashboard" element={<ProtectedRoute />}>
  <Route index element={<Dashboard />} />
  // 其他需要鉴权的子路由
</Route>
*/

注意事项 #

• 该方案的状态存在内存中，页面手动刷新后状态会丢失：如果需要避免刷新丢失，可以配合HttpOnly Secure Cookie存储JWT，页面初始化时发请求到后端校验JWT有效性，校验通过后重新初始化内存会话即可。这种方案比将令牌存在localStorage/sessionStorage更安全，可有效防范XSS攻击窃取令牌
• ES模块单例特性在所有符合规范的前端框架（React/Vue/Angular等）中都生效，组件重渲染、前端路由跳转、动态导入模块都不会重置会话状态
• 建议不要直接修改模块内的私有状态，所有会话操作都通过暴露的公共方法执行，保证状态修改的可控性

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