Vue + axios (interceptors) implement routing http intercept interception + Router (bis intercept) + request comes loading effect

axios interceptors interceptors

// interceptors.js 

// VUE Axios configuration request completion request to initiate loading loading off loading
 // HTTP Request request interceptors, there is disposed on the token value token value 
Import Axios from  ' Axios ' 
Import Router from  ' ../router ' 
Import Loading} { from  ' Element-UI ' 
Import Promise from  ' Promise ' 
var loadinginstace
 // HTTP request interceptor 
axios.interceptors.request.use ( 
    config => {
         // Element Loading UI method 
        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 server response blocker
 // here intercept 401 the error, and re-registration page jump reacquisition token 
axios.interceptors.response.use ( 
    Response => {
       IF (response.data.data && response.data.data.ecode == ' 401 ' ) { 
        loadinginstace.close () 
        router.replace ({ 
            path: ' / the Login ' ,
             // Query: {redirect: router.currentRoute.fullPath} // login jumped into view after the success of the current page 
        }) 
      } the else { 
        loadinginstace.close () 
        return Response; 
      } 

    },
    error=> { 
        Loadinginstace.close () 
        IF (error.response) {
             Switch (error.response.status) {
                 Case  401 :
                     // here write code to clear the token 
                    router.replace ({ 
                        path: ' / Login ' ,
                         // Query : {redirect: router.currentRoute.fullPath} // after a successful login jumped view of the current page 
                    }) 
            } 
        } 
        return Promise.reject (error.response.data) 
    } 
); 

Export default axios;

Routing interception

// main.js 
Import the auth from  ' @ / API / the auth ' 

auth.refreshAuth (); 
router.beforeEach ((to, from , Next) => {
   IF (to.matched.some (Record => record.meta. requireAuth)) { // determines whether the route to login privileges 
    the let isLogin = auth.checkAuth ()  
     iF (isLogin) { // determines whether there is a current token 
      Next (); 
    } the else { 
      Next ({ 
        path: ' / Login ' , 
      }) 
    } 
  } 
  the 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