vue实现拦截器
Vue 实现拦截器的方法
在 Vue 中实现拦截器通常用于全局处理 HTTP 请求和响应，例如添加认证头、统一错误处理等。以下是几种常见的方法：
使用 Axios 拦截器
Axios 是 Vue 中常用的 HTTP 客户端，支持请求和响应拦截。
import axios from 'axios';
// 请求拦截器
axios.interceptors.request.use(
config => {
// 在发送请求前添加 token
const token = localStorage.getItem('token');
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
},
error => {
return Promise.reject(error);
}
);
// 响应拦截器
axios.interceptors.response.use(
response => {
return response;
},
error => {
if (error.response.status === 401) {
// 处理未授权错误
router.push('/login');
}
return Promise.reject(error);
}
);使用 Vue Resource 拦截器
如果使用的是 Vue Resource（Vue 1.x 或 2.x 的插件），可以通过以下方式实现拦截器：
import Vue from 'vue';
import VueResource from 'vue-resource';
Vue.use(VueResource);
// 请求拦截器
Vue.http.interceptors.push((request, next) => {
const token = localStorage.getItem('token');
if (token) {
request.headers.set('Authorization', `Bearer ${token}`);
}
next();
});
// 响应拦截器
Vue.http.interceptors.push((request, next) => {
next(response => {
if (response.status === 401) {
router.push('/login');
}
return response;
});
});使用 Fetch API 拦截器
如果使用原生 Fetch API，可以通过封装函数实现拦截功能：
const fetchWithInterceptor = async (url, options = {}) => {
const token = localStorage.getItem('token');
if (token) {
options.headers = {
...options.headers,
Authorization: `Bearer ${token}`
};
}
const response = await fetch(url, options);
if (response.status === 401) {
router.push('/login');
throw new Error('Unauthorized');
}
return response;
};拦截器的常见应用场景
- 认证处理：自动添加 token 到请求头。
- 错误处理：统一处理 401、404 等错误状态码。
- 请求/响应日志：记录请求和响应的详细信息。
- 数据格式化：统一处理返回的数据格式。
通过以上方法，可以灵活地在 Vue 项目中实现拦截器功能，满足不同的业务需求。
