详解基于vue-router的动态权限控制实现方案
|
使用vue开发带权限管理系统，尤其是采用了vue-router做路由，很多人都遇到的一个问题就是如何动态加载路由path对应的component。 典型的应用场景就是：前端菜单不静态的写在vue程序里，而是要从后台程序和数据库返回的菜单来动态加载到vue应用中。 网上很多问权限的问题，但几乎找不到很好的解决答案，在很长一段时间里，非常打击使用vue技术栈开发的信心。最有质量的一篇文章是： 但作者并没有完全解决这个问题，还留有几个问题是： 1）登录之后跳转到首页，此时路由已经是加载完成的了不能更改，菜单可以显示但是没有路由。 2）前端应用人为刷新网页路由产生某些问题。 本文即在这篇文章的基础上对这两个问题解决，以使其完整。 前提是认真拜读上面提到的那篇文章，下面直接用代码说话: 问题1的解决思路： 登录之后跳转到首页，router是vue应用的router 引入进登录方法，在登录之后跳转之前对router进行改变，改变要点1是精确赋值到router的routes具体地方，比如我这里是routes[0]的子路由，2是用addRoutes函数使其生效。 登录功能的js { Service.post('/login',Qs.stringify(data))
.then(res => {
const success = Object.is(res.statusText,'OK') && Object.is(res.data.code,'0')
if (success) {
var menus = 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)
}
})
}
function generateRoutesFromMenu (menu = [],routes = []) { 问题2的解决思路： 是不在主app里引入实例化vue-router的js，而是直接在app里实例化router，目的就是网页刷新的时候每次都确保生成动态的router。 app.js部分代码： const router = new Router({
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') } ] }) function generateRoutesFromMenu (menu = [],routes) 另附menu items代码 0) {
menuItems.map(function (item) {
item.children.map(function (child) {
child.component = lazyLoading(child.component)
})
})
state.items.push(...menuItems)
}
},
lazyloding () => import(`views/${name}${index ? '/index' : ''}.vue`)
git代码暂不能全部公开，有问题可留言。 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |