Vue+axios（interceptors） 实现http拦截 + router路由拦截 (双拦截)+ 请求自带loading效果

axios interceptors 拦截器

//interceptors.js

// vue axios配置 发起请求加载loading请求结束关闭loading
// http request 请求拦截器，有token值则配置上token值
import axios from 'axios'
import router from '../router'
import { Loading } from 'element-ui'
import Promise from 'promise'
var loadinginstace
// http请求拦截器
axios.interceptors.request.use(
    config => {
        // element ui Loading方法
        loadinginstace = Loading.service({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.3)',
        customClass:"osloading",
        fullscreen: true 
        })
        return config
    }, 
    error => {
        loadinginstace.close()
        return Promise.reject(error)
    }
)

// http response 服务器响应拦截器，
// 这里拦截401错误，并重新跳入登页重新获取token
axios.interceptors.response.use(
    response => {
      if(response.data.data && response.data.data.ecode == '401') {
        loadinginstace.close()
        router.replace({
            path: '/login',
            // query: {redirect: router.currentRoute.fullPath}//登录成功后跳入浏览的当前页面
        })
      }else{
        loadinginstace.close()
        return response;
      }

    },
    error => {
        loadinginstace.close()
        if (error.response) {
            switch (error.response.status) {
                case 401:
                    // 这里写清除token的代码
                    router.replace({
                        path: '/login',
                        // query: {redirect: router.currentRoute.fullPath}//登录成功后跳入浏览的当前页面
                    })
            }
        }
        return Promise.reject(error.response.data)
    }
);

export default axios;

路由拦截

//main.js
import auth from '@/api/auth'

auth.refreshAuth();
router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requireAuth)){ // 判断该路由是否需要登录权限
    let isLogin = auth.checkAuth()  
    if(isLogin) { // 判断当前的token是否存在
      next();
    }else {
      next({
        path: '/login',
      })
    }
  }
  else {
    next();
  }
});

auth.js

//auth.js
 const auth = {
    user:{
        authenticated: false
    },
    checkAuth(){
        return this.user.authenticated
    },
    refreshAuth(){
        let _token = sessionStorage.getItem('token');
        if (_token){
          this.user.authenticated = true
        } else {
          this.user.authenticated = false
        }
    },
}

export default auth;

router.js

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
const routes = [
    {
    path:'/login',  name: 'login',
    component:resolve => require(['@/pages/custom/login'],resolve)
  },
  {
    path:'/infAddition',  name: 'infAddition',
    component:resolve => require(['@/pages/custom/infAddition'],resolve)
  },

  {
    path:'/home',  name: 'home',
    component:resolve => require(['@/pages/custom/home'],resolve)
  },
  {
    path:'/',
    name: 'mainframe',
    //根目录 重定向
    redirect: { path: '/home', query: {schemaId: '973e-36c0d61b48a5'}},
    meta: { requireAuth: true},
    component:resolve => require(['@/pages/system/mainframe'],resolve),
    children: [
      {
        path: '/home', name:'home',
        component: resolve => require(['@/pages/custom/home.vue'], resolve)
      },
    ]
  },
]
const vueRouter = new Router({
    base: __dirname ,
    mode:"history",//启用浏览器的历史记录
  // mode:"hash",
    scriollBehavior:()=>({ x: 0, y: 0 }),
    routes
})
import auth from '@/api/auth'
vueRouter.beforeEach(function (to, from, next){
    const nextRoute = ['/','/home','/infAddition','/take','/submitted']
    const token = sessionStorage.getItem('token')
    if(nextRoute.indexOf(to.path) >= 0){
        if(token == null || token == "" ){
            next({path:'/login'})
        }else{
            next()
        }
    }else{
        next()
    }
})

export default vueRouter