在react如何加token
在 React 中添加 Token 的方法
使用 localStorage 或 sessionStorage 存储 Token
Token 可以存储在浏览器的 localStorage 或 sessionStorage 中，方便在页面刷新后仍然保持登录状态。以下是示例代码：
// 存储 Token
localStorage.setItem('token', 'your_token_here');
// 获取 Token
const token = localStorage.getItem('token');
// 删除 Token
localStorage.removeItem('token');在请求头中添加 Token
在发送 HTTP 请求时，通常需要在请求头中添加 Token。可以使用 axios 或 fetch 实现：
import axios from 'axios';
axios.interceptors.request.use((config) => {
const token = localStorage.getItem('token');
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
});
// 发送请求
axios.get('/api/data').then(response => {
console.log(response.data);
});使用 Context API 或 Redux 全局管理 Token
通过 React 的 Context API 或 Redux 全局管理 Token，方便在组件间共享状态：
// 使用 Context API
import React, { createContext, useContext, useState } 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
使用 react-router-dom 进行路由保护，确保只有携带有效 Token 的用户才能访问特定页面：
import { Route, Navigate } from 'react-router-dom';
const PrivateRoute = ({ children }) => {
const { token } = useAuth();
return token ? children : <Navigate to="/login" />;
};
// 使用示例
<Route path="/dashboard" element={<PrivateRoute><Dashboard /></PrivateRoute>} />在登录时获取并存储 Token
在登录表单提交后，获取 Token 并存储：
const handleLogin = async (credentials) => {
try {
const response = await axios.post('/api/login', credentials);
const { token } = response.data;
localStorage.setItem('token', token);
// 更新全局状态或重定向
} catch (error) {
console.error('Login failed:', error);
}
};处理 Token 过期或失效
Token 可能过期或失效，需要在前端处理这种情况：
axios.interceptors.response.use(
(response) => response,
(error) => {
if (error.response.status === 401) {
localStorage.removeItem('token');
// 跳转到登录页或显示提示
}
return Promise.reject(error);
}
);
