前几天实现了一个基于vue addRoutes() 的权限路由解决方案,特此记录一下
登录页
Login(){
this.$refs.userInfo.validate(valid => {
if (valid) {
this.$message.loading('Action in progress..', 1,()=>{
});
this.$axios.post(this.$api.url + '/login/authLogin',{
userName:userInfo.userName,
passWord:userInfo.passWord,
})
.then(res=>{
if(res.code == 0){
localStorage.setItem('router',JSON.stringify(this.routerList))//将请求回来的路由列表保存到localStorage
this.$router.push('/Magic')
}
})
} else {
return false;
}
});
},
路由实例
import Vue from 'vue'
import VueRouter from 'vue-router'
import Layout from '../views/Layout'
const _import = require( "./_import_"+process.env.NODE_ENV)
Vue.use(VueRouter)
let routerList = JSON.parse(localStorage.getItem('router')) //取到路由列表
let getRouter; //路由暂存
let menus = []
let routes = [
{
path: '/',
redirect:'/Login',
name: 'Login',
component: () => import(/* webpackChunkName: "Login" */ '../views/login')
},
{
path: '/Login',
name: 'Login',
component: () => import(/* webpackChunkName: "Login" */ '../views/login')
},
{
path:'/Error',
name: 'Error',
component:Layout,
children:[
{
path:'404',
name:'err',
component: () => import(/* webpackChunkName: "404" */ '../views/error/404.vue')
}
]
},
] //默认路由
let router = new VueRouter({
mode: 'history', //后端支持可开
routes,
scrollBehavior: () => ({ y: 0 })
})
router.beforeEach((to, from, next) => {
if(to.path == '/Login'){
next()
return
}
global.openMenu = to.path
if (!validMenu(to)) {
next({ path: '/Error/404', query: { from: from.path }})
return
}
if(!getRouter){ //路由列表没有路由则去取
routerGo(to, next)
}else{
next()
}
})
router.onError((err)=>{//路由报错
console.log(err)
console.log('router on error')
console.log(
router.app,
router.mode,
router.currentRoute
)
})
router.onReady(()=>{//路由准备完毕
console.log('router on ready')
console.log(
(router.app)+'\n',
router.mode+'\n',
router.currentRoute
)
})
function routerGo(to, next) {
getRouter = filterAsyncRouter(routerList) //过滤路由
router.addRoutes(getRouter) //动态添加路由
global.antRouter = getRouter //将路由数据传递给全局变量,做侧边栏菜单渲染工作
next({ ...to, replace: true })
}
export function filterAsyncRouter(asyncRouterMap) { // 遍历后台传来的路由字符串,转换为组件对象
const accessedRouters = asyncRouterMap.filter(route => {
try {
if (route.component) {
if (route.component === 'Layout') {//父级组件特殊处理转换为框架组件
route.component = Layout
route.redirect =route.path +'/'+ route.children[0].path
} else {
route.component = _import(route.component)
}
}
menus.push(route)
} catch (e) {
console.error(e)
route.component = _import('404')
}
if (route.children && route.children.length) {
filterAsyncRouter(route.children)
}
return true
})
return accessedRouters
}
export function validMenu(to) {
if ((to.path.indexOf('/Error/404') >= 0 || to.path === '/')) {
return true
}
if (menus.length > 0 && (to.name || to.path)) {
const toName = to.name
const toPath = to.path
for (let i = 0; i < menus.length; i++) {
if (menus[i].name === toName || menus[i].path === toPath) {
return true
}
}
console.log(menus,to)
console.log('Not Find to Page Redirect to 404 page')
return false
}
return true
}
export default router
路由引入方法
module.exports = file => require('@/views/' + file + '.vue').default
目录结构