在react如何加token
添加 Token 到 React 应用
在 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');通过 HTTP 头部发送 Token
在发送 API 请求时，将 Token 添加到请求的头部，通常使用 Authorization 字段。
fetch('https://api.example.com/data', {
headers: {
'Authorization': `Bearer ${token}`
}
});使用 Context API 管理 Token
通过 React 的 Context API 全局管理 Token 状态，方便在组件间共享。
import React, { createContext, useState, useContext } from 'react';
const AuthContext = createContext();
export const AuthProvider = ({ children }) => {
const [token, setToken] = useState(null);
return (
<AuthContext.Provider value={{ token, setToken }}>
{children}
</AuthContext.Provider>
);
};
export const useAuth = () => useContext(AuthContext);在 Axios 拦截器中设置 Token
如果使用 Axios 作为 HTTP 客户端，可以通过拦截器自动为每个请求添加 Token。
import axios from 'axios';
axios.interceptors.request.use(config => {
const token = localStorage.getItem('token');
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
}, error => {
return Promise.reject(error);
});处理 Token 过期
在响应拦截器中检查 Token 是否过期，如果过期则跳转到登录页面或刷新 Token。
axios.interceptors.response.use(response => {
return response;
}, error => {
if (error.response.status === 401) {
// Token 过期或无效，跳转到登录页面
window.location.href = '/login';
}
return Promise.reject(error);
});安全注意事项
- 避免将敏感信息存储在客户端存储中，尤其是长期有效的 Token。
- 使用 HTTPS 确保 Token 在传输过程中的安全性。
- 定期刷新 Token 以减少被劫持的风险。
通过以上方法，可以在 React 应用中有效地管理和使用 Token 进行身份验证和授权。
