background
When the project encapsulated the global interception of axios, I encountered a very strange problem: the interface status in axios.interceptors.request was not 200, and I wanted to jump to the home page. The method is as follows:
this.$router.push('/Login')However, it did not achieve the desired effect, and it will always prompt Cannot read properties of undefined (reading 'push')
Exploring. . . .
After checking a lot of information, the methods provided are different:
- The most talked about on the Internet may be the problem pointed to by this, so I wrote this at the beginning, let self = this; but still reported an error Cannot read property '$router' of undefined. . .
- It is also said to rewrite the router and use vue.prototype, but, I really don’t want to write it, think about it or consider other methods
solution
Later, console.log(this) found that there may be a problem with this in the encapsulation method at first, and it was printed out as undefined, so why can’t I find $router, so I finally introduced router in this js file
The key step is import router from '@/router'
Then write it like this, you can achieve it
router.push('/Login'); 
Attach the complete registerAjax.js
import Vue from "vue";
import router from '@/router';
import axios from "axios";
import qs from "qs";
axios.interceptors.response.use(
response => {
// 如果返回的状态码为200，说明接口请求成功，可以正常拿到数据
// 否则的话抛出错误
// if (response.status === 200) {
// return Promise.resolve(response);
// } else {
// return Promise.reject(response);
// }
if (response.data.success || response.data.success === undefined) {
return Promise.resolve(response);
} else {
return Promise.reject(response);
} },
// 服务器状态码不是2开头的的情况
// 这里可以跟你们的后台开发人员协商好统一的错误状态码
// 然后根据返回的状态码进行一些操作，例如登录过期提示，错误提示等等
// 下面列举几个常见的操作，其他需求可自行扩展
error => {
if (error.response.status) {
switch (error.response.status) {
// 401: 未登录
// 未登录则跳转登录页面
// 在登录成功后返回当前页面，这一步需要在登录页操作。
case 401:
router.push('/Login');
break;
// 403 token过期
// 登录过期对用户进行提示
// 清除本地token和清空vuex中token对象
// 跳转登录页面
case 403:
router.push('/Login');
break;
// 404请求不存在
case 404:
break;
// 其他错误，直接抛出错误提示
default:
}
return Promise.reject(error.response);
}
});
export default axios;
Vue.prototype.$axios = axios;
Vue.prototype.$qs = qs;Of course, if I really can’t think of a solution, I still have an opportunistic method, which can also be realized by directly using the path jump that comes with windows itself.
