Vue中的使用axios封装的全局拦截器
使用axios，并挂载到全局
以下配置在main.js中
其他页面在使用axios的时候直接 this.$axios就可以了
import Axios from 'axios';
Vue.prototype.$axios = Axios;
配置全局请求拦截器
使用如下方法
axios.interceptors.request.use(config=>{},err=>{})
报错时通过路由push到error界面
Axios.interceptors.request.use(
config => {
return config;
},
error => {
// 跳转error页面
router.push({ path: "/error" });
return Promise.reject(error);
}
);
配置全局响应拦截器
使用如下方法
service.interceptors.response.use(response=>{}, err=>{})
通过服务器返回的状态码分别进行不同操作
Axios.interceptors.response.use(
res => {
if (res.data.code === "401") {
// 401表示没有登录
// 提示没有登录
Vue.prototype.notifyError(res.data.msg);
// 修改vuex的showLogin状态,显示登录组件
store.dispatch("setShowLogin", true);
}
if (res.data.code === "500") {
// 500表示服务器异常
// 跳转error页面
router.push({ path: "/error" });
}
return res;
},
error => {
// 跳转error页面
router.push({ path: "/error" });
return Promise.reject(error);
}
);
全局解析守卫
点击查看官方文档
用于在进入需要用户权限的页面前校验是否已经登录
router.beforeResolve((to, from, next) => {
const loginUser = store.state.user.user;
// 判断路由是否设置相应校验用户权限
if (to.meta.requireAuth) {
if (!loginUser) {
// 没有登录，显示登录组件
store.dispatch("setShowLogin", true);
if (from.name == null) {
//此时，是在页面没有加载，直接在地址栏输入链接，进入需要登录验证的页面
next("/");
return;
}
// 终止导航
next(false);
return;
}
}
next();
});