vue封装axios接收token封装
时间: 2023-08-17 08:16:26 浏览: 63
在Vue中封装Axios并接收token的方法可以通过在请求头中设置Authorization字段来实现。以下是一个示例代码:
引用\[1\]:
```javascript
import axios from 'axios';
const instance = axios.create({
baseURL: 'http://api.example.com',
timeout: 5000,
});
// 在请求发送前拦截请求,设置Authorization头部
instance.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 instance;
```
在这个示例中,我们创建了一个名为instance的Axios实例,并设置了基本的URL和超时时间。然后,我们使用interceptors.request拦截器在每个请求发送前进行处理。在拦截器中,我们从localStorage中获取token,并将其添加到请求头的Authorization字段中。
接下来,您可以在Vue组件中使用这个封装好的Axios实例来发送请求。例如,您可以在methods中的方法中使用它:
引用\[2\]:
```javascript
import request from "@/utils/request";
export default {
methods: {
meGet() {
request.get("/api/v1/products", { name: 'aaa', age: 18 }).then((res) => {
console.log("res", res);
});
},
mePost() {
let obj = { name: 108 };
request.post("/api/v1/auth/login", obj).then((res) => {
console.log("res", res);
});
},
},
};
```
在这个示例中,我们导入了封装好的request实例,并在methods中的方法中使用它来发送请求。由于我们在封装的Axios实例中已经设置了Authorization头部,所以在发送请求时会自动携带token。
请注意,您需要根据您的实际情况进行适当的调整和修改,比如根据您的API地址和token存储方式来设置baseURL和获取token的逻辑。
#### 引用[.reference_title]
- *1* *2* *3* [vue封装axios](https://blog.csdn.net/weixin_47586598/article/details/126654288)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]