axios interceptors 拦截器 添加loading
//interceptors.js// vue axios配置 发起请求加载loading请求结束关闭loading// http request 请求拦截器,有token值则配置上token值import axios from 'axios'import router from '../router'import { Loading } from 'element-ui'impor...
//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
更多推荐
所有评论(0)