react中token如何写
在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，并实现服务端校验机制。
