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