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();
});