react如何在header传token
在React中传递Token到Header
在React应用中，通常需要在HTTP请求的Header中传递Token（如JWT）以实现身份验证。以下是几种常见的方法：
使用Fetch API传递Token
使用原生Fetch API时，可以在请求的headers选项中添加Authorization字段：
fetch('https://api.example.com/data', {
method: 'GET',
headers: {
'Authorization': `Bearer ${yourToken}`,
'Content-Type': 'application/json'
}
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));使用Axios传递Token
Axios是流行的HTTP客户端，可以全局设置请求头或在单个请求中添加Token：
import axios from 'axios';
// 全局设置
axios.defaults.headers.common['Authorization'] = `Bearer ${yourToken}`;
// 单个请求设置
axios.get('https://api.example.com/data', {
headers: {
'Authorization': `Bearer ${yourToken}`
}
})
.then(response => console.log(response.data))
.catch(error => console.error('Error:', error));使用拦截器统一处理Token
Axios拦截器可以在请求发出前自动添加Token，避免重复代码：
axios.interceptors.request.use(config => {
const token = localStorage.getItem('token'); // 从存储中获取Token
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
}, error => {
return Promise.reject(error);
});在React Context中管理Token
对于需要跨组件共享Token的场景，可以使用React Context：
import React, { createContext, useContext } from 'react';
const AuthContext = createContext();
export const AuthProvider = ({ children }) => {
const token = localStorage.getItem('token');
return (
<AuthContext.Provider value={{ token }}>
{children}
</AuthContext.Provider>
);
};
export const useAuth = () => useContext(AuthContext);然后在组件中使用：
const { token } = useAuth();
fetch('https://api.example.com/data', {
headers: {
'Authorization': `Bearer ${token}`
}
});注意事项
- 确保Token通过HTTPS传输，避免安全风险。
- 避免将Token存储在容易泄露的位置（如全局变量）。
- 考虑实现Token刷新逻辑以处理过期情况。
- 对于敏感操作，建议在后端验证Token的有效性。
以上方法可以根据具体项目需求选择或组合使用。
