router/index.js
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
import Wregister from '@/views/pc/page/login/Wregister.vue'
import Wlogin from '@/views/pc/page/login/login.vue'
// 解决ElementUI导航栏中的vue-router在3.0版本以上重复点菜单报错问题
const originalPush = Router.prototype.push
Router.prototype.push = function push (location) {
return originalPush.call(this, location).catch(err => err)
}
const whiteList = ['Wlogin'] // 免登录白名单
const defaultRoutePath = '/Windex' //首页
const routes = [
{
path: '/Whome',
component: () =>
import('../components/common/Home.vue'),
name: 'Whome',
children: [{
path: '/Windex',
name: 'Windex',
component: () =>
import('../views/pc/page/index/WIndex.vue'),
meta: {
title: '系统首页'
}
}
// 404界面
{
path: '/W404',
name: 'W404',
component: () =>
import('../views/pc/page/404.vue'),
meta: {
title: '404'
}
},
// 权限验证界面
{
path: '/W403',
name: 'W403',
component: () =>
import('../views/pc/page/403.vue'),
meta: {
title: '403'
}
},
// 500
{
path: '/W500',
name: 'W500',
component: () =>
import('../views/pc/page/500.vue'),
meta: {
title: '500'
}
}
]
},
{
path: '/Wregister',
name: 'Wregister',
component: Wregister
},
{
path: '/',
name: 'Wlogin',
component: Wlogin
},
{
path: '/500',
name: '500',
component: () =>
import('../echarts/demo.vue')
}
]
const router = new Router({
mode: 'history',
routes: routes
})
// 路由信息拦截
router.beforeEach((to, from, next) => {
// NProgress.start() // start progress bar
let token = localStorage.getItem('token');
/* has token */
if (token) {
if (to.path === '/Wlogin') {
next({ path: defaultRoutePath })
// NProgress.done()
} else {
next()
}
} else {
if (whiteList.includes(to.name)) {
// 在免登录白名单,直接进入
next()
} else {
Vue.prototype.$message({
message: '登录信息失效,请重新登录',
type: 'error'
})
next({ path: '/', query: { redirect: to.fullPath } })
}
}
if (to.matched.length === 0) { //匹配前往的路由不存在
from.name ? next({
name: from.name
}) : next('/W404'); //判断此跳转路由的来源路由是否存在,存在的情况跳转到来源路由,否则跳转到404页面
}
})
export default router
axios的request.js封装
import axios from 'axios';
import Vue from 'vue'
import { Loading } from 'element-ui';
import router from '../router'
// 定义 loading
let loading
// loading开始 方法
function startLoading() {
// element-ui loading 服务调用方式
loading = Loading.service({
lock: true,
text: '拼命加载中...',
spinner: 'el-icon-loading', // 自定义图标
background: 'rgba(0, 0, 0, 0.1)'
})
}
// loading结束 方法
function endLoading() {
loading.close()
}
const service = axios.create({
// timeout: 10000,
// retry: 3
});
const err = (error) => {
if (error.toString().indexOf("Network Error") != -1) {
Vue.prototype.$message({
message: '后端服务未启动',
type: 'error'
})
router.push('/');
}
endLoading();
if (error.response) {
const data = error.response.data
const token = localStorage.getItem('token')
if (error.response.status === 403) {
console.log('服务器403啦,要重新登录!')
Vue.prototype.$message({
message: data.message,
type: 'error'
})
router.push('/');
}
if (error.response.status === 500) {
console.log('服务器内部错误!')
router.push('/W500');
}
if (error.response.status === 401 && !(data.result && data.result.isLogin)) {
Vue.prototype.$message({
message: '自主校验失败',
type: 'error'
})
if (token) {
store.dispatch('Logout').then(() => {
setTimeout(() => {
window.location.reload()
}, 1500)
})
}
}
}
return Promise.reject(error)
}
// 添加请求拦截器
service.interceptors.request.use(
(config) => {
const token = localStorage.getItem('token')
if (token) {
token ? config.headers.token = token : null;
}
// 请求显示loading 效果
startLoading();
return config
}, err
)
// 添加响应拦截器
service.interceptors.response.use(
(resp) => {
endLoading();
if (resp.request.responseType === 'blob') {
return resp
}
let response = resp.data
if (response.code === 10404 || response.code === 10403) {
Vue.prototype.$message({
message: '登录过期,请重新登录',
type: 'error'
})
localStorage.removeItem('token')
router.push('/');
}
// 自己项目的具体code对应信息
else if (response.code === 10199 || response.code === 10200 || response.code === 10201 || response.code === 30092 || response.code === 30070 || response.code === 30132 || response.code === 50126 || response.code === 50095 || response.code === 50178 || response.code === 50183 || response.code === 11086 || response.code === 11089 || response.code === 12137 || response.code === 12120 || response.code === 12115 || response.code === 12107 || response.code === 12101 || response.code === 12046 || response.code === 12208) {
alert(response.error)
return response
} else {
return response
}
}, err)
export default service;