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效果