如何实现在获得token的时候同时全局配置到axios.defaults.headers中呢?
时间: 2023-06-10 10:05:37 浏览: 88
您可以在创建axios实例时设置interceptors,拦截请求并在其中设置请求头,以下是一个示例代码:
```
const axiosInstance = axios.create({
baseURL: 'https://api.example.com',
});
axiosInstance.interceptors.request.use((config) => {
const token = localStorage.getItem('token');
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
}, (error) => {
return Promise.reject(error);
});
export default axiosInstance;
```
在上述代码中,我们创建了一个axios实例axiosInstance,并为该实例设置了一个request拦截器,用于在每个请求中设置Authorization请求头,并将该实例导出以供在整个应用程序中使用。在拦截器中,我们从localStorage中获取token,并将其添加到请求头中。
相关问题
解释代码:axios.defaults.withCredentials = true axios.defaults.headers['X-Requested-With'] = 'XMLHttpRequest' axios.defaults.headers['token'] = localStorage.getItem('token') || '' axios.defaults.headers.post['Content-Type'] = 'application/json'
这段代码是使用 axios 库设置了一些默认的请求头信息。其中,withCredentials 设置为 true 表示跨域请求时是否需要使用凭证(cookie、HTTP认证及客户端 SSL证明等)。X-Requested-With 设置为 XMLHttpRequest 表示使用 AJAX 请求。token 是一个自定义的请求头,用于传递用户的身份认证信息。Content-Type 设置为 application/json 表示请求体的数据格式为 JSON。
axios.defaults.headers.common['Authorization'] = 'Bearer ' + localStorage.getItem('token')
这行代码主要是设置 axios 的请求头部信息,其中 Authorization 是一个常用的 HTTP 请求头部,用于在向服务器发送请求时传递认证信息,以验证客户端对资源的访问权限。这里的 Bearer 表示将在请求头部中使用 JWT(JSON Web Token)作为认证凭据。
localStorage.getItem('token') 则是从浏览器的本地存储中获取保存的 token 值。通常情况下,当用户登录成功后,服务器会返回一个 token 给客户端,客户端将该 token 存储在浏览器的本地存储中,以便在后续的请求中携带该 token,进行身份验证和授权操作。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)