vue-admin-element怎么实现每回都把token跟随请求调用?
时间: 2024-06-08 21:12:14 浏览: 15
在Vue.js中,可以使用Axios库来发送HTTP请求,同时可以使用Axios拦截器来拦截请求和响应。因此,如果您想在每个请求中都附加token,可以使用Axios拦截器来实现。
以下是一个示例:
```javascript
import axios from 'axios';
// 创建一个axios实例
const instance = axios.create({
baseURL: 'http://api.example.com',
timeout: 5000
});
// 在请求拦截器中添加token
instance.interceptors.request.use(
config => {
const token = localStorage.getItem('token');
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
},
error => {
console.log(error);
return Promise.reject(error);
}
);
export default instance;
```
在这个示例中,我们创建了一个名为instance的axios实例,并在请求拦截器中添加了一个Authorization头部,这个头部包含了token。在每次请求时,这个拦截器都会被调用,并将token添加到请求头部中。
在实际应用中,您可以按照自己的需求进行调整。例如,您可以使用Vuex存储token,然后从Vuex中获取token,而不是从localStorage中获取token。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.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)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)