当前位置：首页 > React

react中token如何写

2026-01-25 06:38:43React

在React中处理Token的方法

使用localStorage或sessionStorage存储Token
将Token存储在浏览器的localStorage或sessionStorage中，便于跨页面使用。localStorage数据持久化，sessionStorage仅在当前会话有效。

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

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

// 删除Token
localStorage.removeItem('token');

通过Context API全局管理Token
创建全局状态管理Context，方便组件树共享Token状态，避免逐层传递。

import React, { createContext, useState, useContext } from 'react';

const AuthContext = createContext();

export const AuthProvider = ({ children }) => {
  const [token, setToken] = useState(localStorage.getItem('token'));

  const login = (newToken) => {
    localStorage.setItem('token', newToken);
    setToken(newToken);
  };

  const logout = () => {
    localStorage.removeItem('token');
    setToken(null);
  };

  return (
    <AuthContext.Provider value={{ token, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
};

export const useAuth = () => useContext(AuthContext);

在请求头中携带Token
通过axios拦截器或fetch配置，将Token自动附加到HTTP请求头中。

import axios from 'axios';

axios.interceptors.request.use((config) => {
  const token = localStorage.getItem('token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

路由守卫保护页面
结合React Router实现路由拦截，未登录时跳转到登录页。

import { Route, Navigate } from 'react-router-dom';

const PrivateRoute = ({ children }) => {
  const token = localStorage.getItem('token');
  return token ? children : <Navigate to="/login" />;
};

// 使用示例
<Route path="/dashboard" element={<PrivateRoute><Dashboard /></PrivateRoute>} />

Token刷新机制
通过拦截401响应，自动刷新Token并重试请求。

axios.interceptors.response.use(
  (response) => response,
  async (error) => {
    if (error.response.status === 401) {
      const newToken = await refreshToken(); // 实现刷新逻辑
      localStorage.setItem('token', newToken);
      return axios(error.config); // 重试原请求
    }
    return Promise.reject(error);
  }
);

安全注意事项
避免将敏感Token直接暴露在客户端代码中，确保使用HTTPS传输。对于高安全性场景，考虑HttpOnly Cookie存储。定期清理过期Token，并实现服务端校验机制。

react中token如何写