这篇文章将为大家详细讲解有关使用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
export const login = ({commit}, data) => { 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 = []) {
for (let i = 0, l = menu.length; i < l; i++) {
let item = menu[i]
if (item.path) {
routes.push(item)
}
if (!item.component) {
item.component = resolve => require([`views/` + item.component + `.vue`], resolve)
generateRoutesFromMenu(item.children, routes)
}
}
return routes
}
问题2的解决思路:
是不在主app里引入实例化vue-router的js,而是直接在app里实例化router,目的就是网页刷新的时候每次都确保生成动态的router。
app.js部分代码:
Vue.use(Router)
let menus = window.sessionStorage.routes //登录成功返回的菜单
if (menus) {
let items = JSON.parse(menus)
store.commit(ADD_MENU, items)
}
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 = []) {
for (let i = 0, l = menu.length; i < l; i++) {
let item = menu[i]
if (item.path) {
routes.push(item)
}
if (!item.component) {
item.component = resolve => require([`views/` + item.component + `.vue`], resolve)
generateRoutesFromMenu(item.children, routes)
}
}
return routes
}
另附menu items代码
const state = {
items: [ // 什么菜单都不定义,完全由后端返回
]
}
const mutations = {
[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
export default (name, index = false) => () => import(`views/${name}${index ? '/index' : ''}.vue`)
关于“使用vue-router实现动态权限控制的示例分析”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。