vue3拦截器重定向
时间: 2023-10-19 18:06:35 浏览: 47
在Vue3中,可以通过使用axios拦截器实现重定向的功能。具体的步骤如下:
1. 导入axios并配置拦截器。在你的代码中,你可以使用类似以下的方式导入axios和配置请求拦截器和响应拦截器:
```javascript
import axios from 'axios';
// 请求拦截器
axios.interceptors.request.use(config => {
// 在这里可以对config进行相应的处理,比如添加请求头等操作
return config;
}, error => {
console.log(error);
return Promise.reject(error);
});
// 响应拦截器
axios.interceptors.response.use(response => {
// 在这里可以对response进行相应的处理,比如判断登录状态等操作
return response;
}, error => {
if (error.response) {
// 根据接口返回的错误信息进行相应的处理
return Promise.reject(error.response.data);
}
});
```
2. 在响应拦截器中实现重定向逻辑。根据你提供的代码,登录过期时会触发重定向的逻辑,你可以在响应拦截器中进行相应的处理。根据返回的错误码,判断是否需要重定向到登录页面:
```javascript
axios.interceptors.response.use(response => {
switch (response.data.code) {
case 104:
alert('登录已经过期,请重新登录');
// 在一定时间后跳转到登录页面
setTimeout(function () {
router.replace({
path: '/Login',
// 可以选择登录成功后跳转回当前页面
// query: {redirect: router.currentRoute.fullPath}
});
}, 1500);
break;
// 其他错误码的处理...
}
return response;
}, error => {
if (error.response) {
// 根据接口返回的错误信息进行相应的处理
return Promise.reject(error.response.data);
}
});
```
通过以上步骤,你可以在Vue3中实现拦截器重定向的功能。请根据你的具体需求进行相应的修改和调整。<span class="em">1</span><span class="em">2</span><span class="em">3</span>