vue axios（interceptors） 实现http拦截 router路由拦截 (双拦截) 请求自带loading效果... -ag凯发k8国际

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

总结

以上是ag凯发k8国际为你收集整理的vue axios（interceptors） 实现http拦截 router路由拦截 (双拦截) 请求自带loading效果...的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得ag凯发k8国际网站内容还不错，欢迎将ag凯发k8国际推荐给好友。