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.jsconst 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

?

轉載于:https://www.cnblogs.com/qdwz/p/10950889.html

總結

以上是生活随笔為你收集整理的Vue+axios（interceptors） 实现http拦截 + router路由拦截 (双拦截)+ 请求自带loading效果...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。