写一个携带token的axios封装
时间: 2023-03-25 20:01:05 浏览: 58
好的,我可以回答这个问题。以下是一个携带token的axios封装的示例代码:
```
import axios from 'axios';
const instance = axios.create({
baseURL: 'https://api.example.com',
timeout: 500,
});
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;
```
这个封装使用了axios的拦截器,在每次请求发送前,会检查本地存储中是否有token,如果有,则在请求头中添加Authorization字段,值为Bearer加上token。这样就可以在请求中携带token了。
相关问题
vue封装axios携带token
在Vue中封装axios并携带token的方法如下所示:
首先,在.env.development和.env.production文件中定义VUE_APP_BASE_API变量,用于存储开发环境和生产环境的请求地址。这样,Vue会根据当前环境自动访问正确的接口地址前缀。\[1\]
接下来,在vue.config.js文件中配置代理,以便在开发环境中解决跨域问题。在devServer中添加proxy字段,将请求路径以"/api"开头的请求代理到指定的后台接口地址。同时,设置changeOrigin为true,以确保请求头中的Host字段与目标地址一致。最后,使用pathRewrite将请求路径中的"/api"替换为空字符串,以去除请求路径中的前缀。\[2\]
在代码中,需要携带token进行请求。通常,token是在登录成功后由后台返回的数据中获取的。在请求头中添加Authorization字段,并将token值作为其值传递给后台。此外,还需要传递pwd和client_time_sign两个参数,其中pwd是登录时后台返回的data中的数据,client_time_sign是一个时间戳,需要与后台的code码保持一致。如果验证不通过,可以使用router.push("/login")将用户重定向到登录页。\[3\]
综上所述,以上是在Vue中封装axios并携带token的方法。
#### 引用[.reference_title]
- *1* *2* [vue封装axios自动带上token](https://blog.csdn.net/h5xiaoyu/article/details/113311775)[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]
- *3* [vue项目中加token或其它验证信息简单封装axios使用](https://blog.csdn.net/weixin_56723577/article/details/122875303)[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 ]
axios二次封装及使用携带token
Axios 是一个基于 Promise 的 HTTP 请求库,可以在浏览器和 Node.js 中使用。二次封装 axios 主要是为了方便使用和统一管理请求,通常我们会在二次封装中加入一些通用的处理逻辑,例如添加请求头、统一处理错误等。
以下是一个简单的 axios 二次封装示例:
```javascript
import axios from 'axios';
const instance = axios.create({
baseURL: 'https://api.example.com',
timeout: 5000,
});
// 添加请求拦截器
instance.interceptors.request.use(
config => {
const token = localStorage.getItem('token');
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
},
error => {
return Promise.reject(error);
}
);
// 添加响应拦截器
instance.interceptors.response.use(
response => {
return response.data;
},
error => {
return Promise.reject(error.response.data);
}
);
export default instance;
```
在这个示例中,我们通过 create 方法创建了一个 axios 实例,设置了基础 URL 和超时时间。然后通过添加请求拦截器,我们可以在每次请求中携带 token,以便后端验证用户身份。最后,通过添加响应拦截器,我们可以统一处理错误响应,返回对应的错误信息。
使用这个二次封装后的 axios,我们可以直接调用它的 get、post 等方法,例如:
```javascript
import request from './request';
request.get('/users').then(data => {
console.log(data);
}).catch(error => {
console.log(error);
});
```
在这个示例中,我们通过 import 引入了之前封装好的 axios 实例,然后调用了它的 get 方法,请求了 /users 接口。如果请求成功,会输出响应数据,否则会输出错误信息。
需要注意的是,这里的 token 是从 localStorage 中获取的,你也可以从 cookie 或其他地方获取。同时,这个示例中还使用了 Promise.reject 方法,让错误信息可以继续向下传递,方便统一处理。