1.所有路由配置都在router的js文件中进行
// 引入接口文件
import constant from "../config/constant.js"
// 处理接口数据的函数
function getMenuRoutes(menuData) {
const routes = []
menuData.forEach(menu => {
const route = {
path: menu.path,
name: menu.name,
component: getMenuComponent(menu.component),
meta: {
requireAuth: true,
title: menu.meta.title,
buttonPermissions: menu.meta.buttonPermissions
},
// children: getMenuRoutes(menu.children)
}
routes.push(route)
})
return routes
}
// 获取菜单组件的函数
function getMenuComponent(component) {
return () => import(`@/views/${component}.vue`)
}
// 获取菜单组件的函数
function getMenuComponent(component) {
return () => import(`@/views/${component}.vue`)
}
// vue-router路由版本更新产生的问题,导致路由跳转失败抛出该错误开始
const originalPush = Router.prototype.push
Router.prototype.push = function push(location, onResolve, onReject) {
if (onResolve || onReject) {
return originalPush.call(this, location, onResolve, onReject)
}
return originalPush.call(this, location).catch(err => err)
}
// vue-router路由版本更新产生的问题,导致路由跳转失败抛出该错误结束
export default router;
import global from '../common/global.js'
// 记录路由
let hasRoles = true
// 白名单(不需要登录就可以访问的名单)
const whiteList = ['/login', '/ForgetPwdOne', '/ForgetPwdTwo', '/ForgetPwdThree', 'BasicInformation', 'ChangePassword']
router.beforeEach(async (to, from, next) => {
//获取token
let token = localStorage.getItem('token')
//判断是否登录
if (token) {
//如果等录还去登录页,直接返回首页
if (to.path === '/login') {
next({
path: '/'
})
} else {
// 发送接口请求,获取动态路由数据
axios.get(constant.loadurl.getRouterMenuList, {
params: {
token: localStorage.getItem("token"),
userId: localStorage.getItem("uid")
}
}).then(response => {
const menuData = response.data.data;
console.log("menuData", menuData);
// 处理接口数据,将数据转换为路由配置需要的格式
const dynamicRoutes = getMenuRoutes(menuData)
let routerFormat = [{
path: '/main',
name: 'main',
component: resolve => require(['@/views/main.vue'], resolve),
meta: {
requireAuth: true, // 添加该字段,表示进入这个路由是需要登录的
title: '首页',
buttonPermissions: '',
},
children: []
}]
routerFormat[0].children = dynamicRoutes;
// 动态添加路由
router.addRoutes(routerFormat)
})
// //调用获取信息的action,重新获取动态路由
// await store.dispatch('addroutes',JSON.parse(localStorage.getItem('menus')));
//拿到动态添加的路由
let routes = store.state.menus
if (hasRoles) {
//重新添加动态路由
router.addRoutes(routes)
hasRoles = false
next({
...to,
replace: true
})
} else {
next()
}
}
} else {
//如果没有登录,如果要去登录页,直接放行
if (whiteList.includes(to.path)) {
next()
} else {
next(`/login`)
}
}
})
// 请求超时时间
axios.defaults.timeout = 120000;
// http请求拦截
axios.interceptors.request.use(config => {
return config;
}, error => {
// 对请求错误做些什么
Vue.prototype.$message.error('请求超时')
return Promise.reject(error)
});
// http响应拦截
axios.interceptors.response.use(response => {
// res是响应的结果
switch (response.data.code) {
case 0: //正常
// 复位token无效标记置
global.TokenInvalidFlag = 0;
global.LongTimeNotDoFlag == 0;
break;
case 1001:
// 用户登录状态无效,请重新登录
// 响应成功的拦截
localStorage.removeItem('Authorization')
localStorage.clear(); //删除用户信息
if (global.TokenInvalidFlag == 0) {
Vue.prototype.$message.error(response.data.msg)
}
global.TokenInvalidFlag = 1;
router.push({
name: 'login',
})
break;
case 1002:
// 您的账号已在别处登录,您已被强制下线。
// 响应成功的拦截
localStorage.removeItem('Authorization')
localStorage.clear(); //删除用户信息
if (global.TokenInvalidFlag == 0) {
Vue.prototype.$message.error(response.data.msg)
}
global.TokenInvalidFlag = 1;
router.push({
name: 'login',
})
break;
case 1003:
// 长时间未操作
// 响应成功的拦截
localStorage.removeItem('Authorization')
localStorage.clear(); //删除用户信息
if (global.LongTimeNotDoFlag == 0) {
Vue.prototype.$message.error(response.data.msg)
}
global.LongTimeNotDoFlag = 1;
router.push({
name: 'login',
})
break;
default:
return response;
}
return response
}, error => {
console.log('err', error);
// Vue.prototype.$message.error(error.toString())
if (error.response.data.msg) {
Vue.prototype.$message.error(err.response.data.msg)
return Promise.reject(error.response.data.msg) // 返回接口返回的错误信息
} else {
// 返回状态码不为200时候的错误处理
Vue.prototype.$message.error(error.toString())
return Promise.resolve(error)
}
});