fondo
Cuando el proyecto encapsuló la intercepción global de axios, me encontré con un problema muy extraño: el estado de la interfaz en axios.interceptors.request no era 200 y quería saltar a la página de inicio. El método es el siguiente:
this.$router.push('/Login')Sin embargo, no logró el efecto deseado y siempre aparecerá el mensaje No se pueden leer las propiedades de undefined (leyendo 'push')
Explorador. . . .
Después de verificar mucha información, los métodos proporcionados son diferentes:
- El problema más comentado en Internet puede ser el problema señalado por this, por lo que escribí this al principio, let self = this; pero aún así informó un error Cannot read property '$router' of undefined. . .
- También se dice que reescriba el enrutador y use vue.prototype, pero realmente no quiero escribirlo, pensarlo o considerar otros métodos.
solución
Más tarde, console.log (esto) descubrió que puede haber un problema con esto en el método de encapsulación al principio, y se imprimió como indefinido, entonces, ¿por qué no puedo encontrar $ enrutador? Entonces finalmente introduje el enrutador en este js archivo
El paso clave es importar el enrutador desde '@/router'
Entonces escríbelo así, puedes lograrlo.
router.push('/Login'); 
Adjunte el registerAjax.js completo
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;Por supuesto, si realmente no puedo pensar en una solución, todavía tengo un método oportunista, que también se puede realizar usando directamente el salto de ruta que viene con Windows.
