详解基于vue-router的动态权限控制实现方案
使用vue开发带权限管理系统，尤其是采用了vue-router做路由，很多人都遇到的一个问题就是如何动态加载路由path对应的component。
典型的应用场景就是：前端菜单不静态的写在vue程序里，而是要从后台程序和数据库返回的菜单来动态加载到vue应用中。
网上很多问权限的问题，但几乎找不到很好的解决答案，在很长一段时间里，非常打击使用vue技术栈开发的信心。最有质量的一篇文章是：https://www.nhooo.com/article/124801.htm
但作者并没有完全解决这个问题，还留有几个问题是：
1）登录之后跳转到首页，此时路由已经是加载完成的了不能更改，菜单可以显示但是没有路由。
2）前端应用人为刷新网页路由产生某些问题。
本文即在这篇文章的基础上对这两个问题解决，以使其完整。
前提是认真拜读上面提到的那篇文章，下面直接用代码说话:
问题1的解决思路：
登录之后跳转到首页，router是vue应用的router引入进登录方法，在登录之后跳转之前对router进行改变，改变要点1是精确赋值到router的routes具体地方，比如我这里是routes[0]的子路由，2是用addRoutes函数使其生效。
登录功能的js
exportconstlogin=({commit},data)=>{Service.post('/login',Qs.stringify(data))
.then(res=>{
constsuccess=Object.is(res.statusText,'OK')&&Object.is(res.data.code,'0')
if(success){
varmenus=generateMenus(res.data.menus)
window.sessionStorage.routes=JSON.stringify(menus)
if(menuModule.state.items.length<=0){//避免注销后在不刷新页面的情况下再登录重复加载路由
commit(types.ADD_MENU,menus)
//动态加载路由关键2行
router.options.routes[0].children.push(...generateRoutesFromMenu(menuModule.state.items))
router.addRoutes(router.options.routes)
}
window.sessionStorage.loginName=data.loginName
router.push({path:'/'})
}else{
commit('loginErr',res.data.msg)
}
})
}
functiongenerateRoutesFromMenu(menu=[],routes=[]){
for(leti=0,l=menu.length;irequire([`views/`+item.component+`.vue`],resolve)
generateRoutesFromMenu(item.children,routes)
}
}
returnroutes
}
问题2的解决思路：
是不在主app里引入实例化vue-router的js，而是直接在app里实例化router，目的就是网页刷新的时候每次都确保生成动态的router。
app.js部分代码：
Vue.use(Router)
letmenus=window.sessionStorage.routes//登录成功返回的菜单
if(menus){
letitems=JSON.parse(menus)
store.commit(ADD_MENU,items)
}
constrouter=newRouter({
mode:'hash',
linkActiveClass:'is-active',
scrollBehavior:()=>({y:0}),
routes:[
{
name:'Main',
path:'/',
component:require('views/Main.vue'),
children:[//动态路由之所以作为Main的子路由是基于：登录之后跳转到Main主页，该主页是类似于frame的页面加载框架，只有将动态路由作为Main的子路由才能确保其他页面显示到Main框架内。
...generateRoutesFromMenu(menuModule.state.items)
]
},
{
name:'Login',
path:'/login',
component:require('views/Login.vue')
}
]
})
functiongenerateRoutesFromMenu(menu=[],routes=[]){
for(leti=0,l=menu.length;irequire([`views/`+item.component+`.vue`],resolve)
generateRoutesFromMenu(item.children,routes)
}
}
returnroutes
}
另附menuitems代码
conststate={
items:[//什么菜单都不定义，完全由后端返回
]
}
constmutations={
[types.ADD_MENU](state,menuItems){
if(menuItems.length>0){
menuItems.map(function(item){
item.children.map(function(child){
child.component=lazyLoading(child.component)
})
})
state.items.push(...menuItems)
}
},
lazyloding
exportdefault(name,index=false)=>()=>import(`views/${name}${index?'/index':''}.vue`)
git代码暂不能全部公开，有问题可留言。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。