React中如何持久化全局Token变量（登录赋值/登出重置）

问题根源 #

你当前用的全局变量仅存在内存中，页面刷新或跳转时整个React应用会重新加载，内存里的变量自然会重置回初始值。要实现持久化，必须把Token存储到浏览器的持久化容器中，比如localStorage或sessionStorage。

方案一：使用localStorage（最常用） #

localStorage会将数据持久化存储在浏览器中，除非用户手动清除或代码主动删除，否则数据会一直保留。

修改登录组件的Token存储逻辑 #

登录成功后，同时将Token存入localStorage和全局变量：

// 登录成功后的处理代码
if (result !== '{"code":401,"message":"Invalid credentials."}') {
  let token: any = JSON.parse(result);
  // 存入localStorage
  localStorage.setItem('authToken', token.token);
  // 更新全局变量
  globalToken.test = token.token;
  setLogin(true);
  return navigate("/home");
}

初始化全局变量时从localStorage读取 #

修改GlobalVariable.ts文件，让应用启动时自动从localStorage恢复Token：

var globalToken = {
  test: localStorage.getItem('authToken') || ""
};
export default globalToken;

这样每次页面刷新，全局变量都会自动加载之前存储的Token值。

方案二：使用sessionStorage（会话级持久化） #

如果希望Token在浏览器关闭后自动清除，可以用sessionStorage代替localStorage，用法完全一致：

// 存储Token
sessionStorage.setItem('authToken', token.token);
// 初始化全局变量
var globalToken = {
  test: sessionStorage.getItem('authToken') || ""
};

额外优化建议 #

1. 用受控组件替代DOM查询：你当前通过document.getElementById获取输入值，React更推荐用受控组件将输入值与state绑定：

// 修改输入框代码
<input
  type="text"
  name="username"
  id="username"
  data-testid="username"
  value={user}
  onChange={(e) => setUser(e.target.value)}
/>
<input
  type="password"
  name="password"
  id="password"
  data-testid="password"
  value={pass}
  onChange={(e) => setPass(e.target.value)}
/>

// 提交表单时直接使用state值
onSubmit={(e) => {
  e.preventDefault();
  // 直接用user和pass变量即可，无需查询DOM
}}

2. 优化useEffect依赖：当前useEffect没有依赖数组，会导致组件每次渲染都执行请求。建议添加user和pass作为依赖，仅当输入值变化时才发起请求：

useEffect(() => {
  // 输入为空时不发起请求
  if (!user || !pass) return;
  
  // 你的fetch请求代码...
}, [user, pass]);

3. 封装Token操作工具函数：把Token的存、取、删除逻辑封装成工具函数，减少重复代码：

// utils/auth.ts
export const getToken = () => localStorage.getItem('authToken') || "";
export const setToken = (token: string) => localStorage.setItem('authToken', token);
export const removeToken = () => localStorage.removeItem('authToken');

之后在组件中直接导入使用：

import { setToken } from '../utils/auth';
// 登录成功时调用
setToken(token.token);

全局变量的替代方案 #

如果不想用全局变量，也可以用React Context管理登录状态，结合localStorage实现持久化。比如创建一个AuthContext，在Provider中从localStorage读取Token并提供给所有子组件。不过对于简单场景，localStorage+全局变量的方案已经足够高效。

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