react中如何缓存下token
缓存 Token 的常见方法
在 React 中缓存 Token 通常用于持久化用户认证状态，避免重复登录。以下是几种常用方法：
使用 localStorage 或 sessionStorage
localStorage 和 sessionStorage 是浏览器提供的存储 API，适合存储 Token 这类敏感信息（需注意安全性）。
// 存储 Token
localStorage.setItem('authToken', 'your-token-here');
// 获取 Token
const token = localStorage.getItem('authToken');
// 清除 Token
localStorage.removeItem('authToken');区别：
localStorage：数据永久存储，除非手动清除。sessionStorage：数据仅在当前会话有效，关闭标签页后清除。
使用 Cookies
Cookies 可以设置过期时间，适合与服务端配合实现 Token 的自动管理。
// 设置 Cookie（需自行封装或使用库）
document.cookie = `authToken=your-token-here; path=/; max-age=${3600}`;
// 读取 Cookie（需解析字符串）
const cookies = document.cookie.split(';').reduce((acc, cookie) => {
const [key, value] = cookie.trim().split('=');
acc[key] = value;
return acc;
}, {});
const token = cookies.authToken;使用状态管理库（如 Redux、Context API）
结合状态管理库和持久化存储（如 redux-persist），可以同步 Token 到本地存储。
// 示例：redux-persist 配置
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';
const persistConfig = {
key: 'root',
storage,
whitelist: ['auth'] // 仅持久化 auth 状态
};
const persistedReducer = persistReducer(persistConfig, rootReducer);
const store = createStore(persistedReducer);
const persistor = persistStore(store);使用内存缓存
对于单页应用（SPA），可以将 Token 保存在内存中（如全局变量或 React 状态），但页面刷新后会丢失。
let globalToken = null;
// 存储
globalToken = 'your-token-here';
// 读取
console.log(globalToken);安全注意事项
- 避免明文存储敏感信息：必要时对 Token 加密。
- 设置合理的过期时间：尤其是 Cookie 和
localStorage。 - 启用 HTTP Only 和 Secure 标志：若使用 Cookie，防止 XSS 攻击。
- 服务端验证：客户端缓存仅为优化体验，关键逻辑需服务端校验。
示例：封装 Token 工具
// authUtils.js
export const setToken = (token) => {
localStorage.setItem('authToken', token);
};
export const getToken = () => {
return localStorage.getItem('authToken');
};
export const clearToken = () => {
localStorage.removeItem('authToken');
};通过以上方法，可以根据项目需求选择适合的 Token 缓存策略。
