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

 

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

上一篇:ios获取网络请求各个阶段消耗时长


下一篇:APP_性能测试