axios封装token示例
axios封装token示例
在使用 Axios 发送请求时，可以通过添加 Authorization 头部信息传递 Token。为了方便地在多个请求中使用 Token，可以封装一个 Axios 实例，并在其中添加 Token。
下面是一个简单的封装 Axios 实例并添加 Token 的例子：
import axios from 'axios';
const instance = axios.create({
baseURL: 'https://api.example.com/',
});
// 添加请求拦截器
instance.interceptors.request.use(
config => {
// 在请求中添加 Token
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;在上面的例子中，首先使用 axios.create 创建了一个 Axios 实例，并设置了默认的 base URL。
然后，通过 instance.interceptors.request.use 方法添加了请求拦截器。在请求拦截器中，判断是否存在 Token，并将 Token 添加到请求的 Authorization 头部中。
最后，通过 export default instance 导出封装好的 Axios 实例，以供其他模块使用。在其他模块中，可以像使用原始的 Axios 一样使用该实例，不必在每个请求中都手动添加 Token。例如：
import axios from './axios';
axios.get('/api/data').then(response => {
console.log(response.data);
}).catch(error => {
console.log(error);
});除了添加 Token，我们还可以对 Axios 进行更进一步的封装，使其在多个请求中具有相同的行为。
以下是一个较为完整的 Axios 封装例子，它实现了以下功能：
- 添加了一个请求拦截器，在请求中添加 Token 和其他公共参数；
- 添加了一个响应拦截器，在响应中统一处理错误；
- 对于 HTTP 状态码非 200 的响应，会将错误信息以 Promise.reject 的形式返回，便于在调用处处理错误；
- 对于 401 错误（未授权），会自动跳转到登录页面。
import axios from 'axios';
import router from './router';
const instance = axios.create({
baseURL: process.env.VUE_APP_API_BASE_URL,
timeout: 10000,
withCredentials: true,
});
// 添加请求拦截器
instance.interceptors.request.use(
config => {
// 在请求中添加 Token 和其他公共参数
const token = localStorage.getItem('token');
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
config.params = {
...config.params,
app_id: process.env.VUE_APP_APP_ID,
};
return config;
},
error => {
console.log(error);
return Promise.reject(error);
}
);
// 添加响应拦截器
instance.interceptors.response.use(
response => {
// 对于 HTTP 状态码非 200 的响应，将错误信息以 Promise.reject 的形式返回
if (response.status !== 200) {
return Promise.reject(response.data);
}
return response.data;
},
error => {
// 对于 401 错误，自动跳转到登录页面
if (error.response && error.response.status === 401) {
router.push('/login');
}
console.log(error);
return Promise.reject(error);
}
);
export default instance;在上面的例子中，我们使用了环境变量 VUE_APP_API_BASE_URL 和 VUE_APP_APP_ID 分别存储了 API 的基础 URL 和应用程序的 ID，以便在请求拦截器中使用。
在响应拦截器中，我们判断了 HTTP 状态码非 200 的响应，并将错误信息以 Promise.reject 的形式返回。对于 401 错误，我们自动跳转到登录页面。
在其他模块中使用该封装好的 Axios 实例时，只需要像这样导入即可：
import axios from './axios';
axios.get('/api/data').then(response => {
console.log(response);
}).catch(error => {
console.log(error);
});本文参与?腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2023-05-01，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录