当前位置：首页 > React

react登录token如何保存

2026-03-10 20:40:54React

保存 React 登录 Token 的方法

使用 localStorage 或 sessionStorage
将 Token 存储在 localStorage 或 sessionStorage 中，适用于需要持久化或会话级存储的场景。

// 存储 Token
localStorage.setItem('authToken', 'your_token_here');

// 读取 Token
const token = localStorage.getItem('authToken');

// 清除 Token
localStorage.removeItem('authToken');

注意：localStorage 数据会长期保留，而 sessionStorage 在浏览器关闭后清除。

使用 Cookies
通过 HTTP-only Cookie 存储 Token，提高安全性（防止 XSS 攻击）。需后端配合设置 Cookie 属性。

// 前端发送登录请求后，后端应返回 Set-Cookie 头
// 前端无需手动处理，浏览器会自动管理 Cookie

需确保 Cookie 标记为 HttpOnly 和 Secure（仅 HTTPS）。

使用 React 状态管理
将 Token 保存在 React 状态（如 Context 或 Redux），适用于单页应用内存管理。

// 使用 Context 示例
const AuthContext = createContext();

function AuthProvider({ children }) {
  const [token, setToken] = useState(null);
  return (
    <AuthContext.Provider value={{ token, setToken }}>
      {children}
    </AuthContext.Provider>
  );
}

注意：页面刷新后状态会丢失，通常需结合其他持久化方法。

结合内存与持久化存储
初始化时从 localStorage 读取 Token 到 React 状态，登录/登出时同步更新。

react登录token如何保存

// 初始化时读取
const [token, setToken] = useState(localStorage.getItem('authToken'));

// 登录成功后更新
const handleLogin = (newToken) => {
  setToken(newToken);
  localStorage.setItem('authToken', newToken);
};

// 登出时清除
const handleLogout = () => {
  setToken(null);
  localStorage.removeItem('authToken');
};