引言
做后台系统的时候,难免会有用户权限的判断。admin可以查看全部菜单,user只能查看部分菜单。
一开始接触这个需求的时候,完全是纯前端做的。在配置路由的时候,加一个roles的属性,通过判断用户的roles是否与路由的roles属性相匹配来作为显示隐藏的依据
{ path: '/router', name: 'router', meta: { title: '标题', roles: ['admin','user'] }, component: index, children: [ { path: 'children', name: 'children', meta: { title: '子标题', roles: ['admin','user'] }, component: child } ] }
// 过滤路由 menuList-菜单 roles-用户角色 const checkMenuList = (menuList, roles) => { for (let i = 0; i < menuList.length; i++) { if (!compareEqual(roles, menuList[i].meta.roles) || menuList[i].meta.noRenderTree) { menuList.splice(i, 1) i -= 1 } else { if (menuList[i].children) { checkMenuList(menuList[i].children, roles) } } } return menuList }
这样做确实可以实现给不同用户展示不同的菜单。但是如果用户权限发生改变,前端就需要发版。本着万物皆可灵活配置的原则。
需求
首先我们要了解,我们要做什么。
我们希望我们可以通过用户权限配置功能,达到灵活配置路由权限,由服务器端返回需要展示的路由权限,前端做展示。
思路
- 前端配置好项目全部页面的路由
- 服务器端返回该用户的权限列表,前端去匹配,最后返回一个路由列表,作为菜单
- 为了更好的用户体验,当用户输入异常的路由时,我们要重定向到一个404页面,提示用户该页面不存在。
- 基于第3点,我们在每次跳转的时候,还需要判断这个页面是否存在,该用户是否有权限进行跳转
实现
ok 思路整理完了。现在就开始来实现吧!
首先,routers是需要在前端注册,我们要先配置整个页面的routers。
除了系统的菜单之外,我们还需要配置403错误页面,还有login、首页这些基本路由。由于系统菜单还需要与服务器端返回的路由列表进行匹配,暂时不进行注册
// router.js // 基本路由 export const defaultRouter = [ { path: '/', component: index }, // 首页 { path: '/login', name: 'login', component: login } // 登录页 ] // 项目全部页面 export const appRouter = [ { path: '/router1', name: 'router1', redirect: '/router1/test1', component: router1, meta: { title: '路由1'}, children: [ { path: 'test1', name: 'test1', component: test1, meta: { title: '测试1' } }, { path: 'test2', name: 'test2', component: test1, meta: { title: '测试2' } } ] }, ] // 这个是我们页面初始化时候,注册的routes const routers = [ ...defaultRouter ] const RouterConfig = { routes: routers } const router = new VueRouter(RouterConfig)
全部路由都注册完了,接下来就要匹配用户可访问的路由了,这一步需要和服务器端一起约定规则。
// 服务器端返回的键值对: 路由名:是否有权限 authRouter:{ 'test1': false, 'test2': true }
拿到服务器端返回的用户权限之后,就开始过滤路由
// 过滤路由 appRouterCopy-项目全部页面 authRouter-权限列表 const checkMenuList = (appRouterCopy, authRouter) => { for (let i = 0; i < appRouterCopy.length; i++) { let {name, children} = appRouterCopy[i] if (authRouter[name] === false) { appRouterCopy.splice(i, 1) i-- } else if (children && children.length) { checkMenuList(children, authRouter) } } }
得到过滤后的路由之后,使用addRoutes
进行注册。注意404路由配置要在最后加上。
let error404Page = { path: '/*', name: 'error-404', meta: { title: '404-页面不存在'}, component: error404Page } router.addRoutes([...appRouterCopy, error404Page])
到此我们就得到了用户有权限的页面了,可以把得到的列表作为系统菜单渲染上去。接下来就要处理一下跳转异常的状况了。需要用到beforeEach
对每次跳转进行拦截判断
router.beforeEach(((to, from, next) => { if (isNotLog && to.name !== 'login') { // 未登录 跳转到登录页 next({ name: 'login' }) } else if (to.name && (to.name === 'login' || to.name.indexOf('error') !== -1)){ // 跳转异常 next() } else { // 校验用户权限 checkUser(next, to ,router) } }) const checkUser = async (next, to ,router) => { if (isNotUser) { // 首次登陆系统,没有用户信息的时候 需要获取用户信息做过滤路由的操作 const authRouter = getAuthRouter() // 获取用户权限 checkMenuList(appRouterCopy, authRouter) const error404Page = { path: '/*', name: 'error-404', meta: { title: '404-页面不存在'}, component: error404Page} router.addRoutes([...appRouterCopy, error404Page]) if (!appRouterCopy.length) { // 用户没有有权限的路由 可以跳转到404或者登录页 next({ ...error404Page, replace: true }) } else { next({ ...to, replace: true }) } } else { next() } }
总结
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年11月15日
2024年11月15日
- 陈洁丽《监听王NO.1 》示范级发烧天碟[WAV+分轨][1.1G]
- 单色凌.2014-小岁月太着急【海蝶】【WAV+CUE】
- 陈淑桦.1988-抱紧我HOLD.ME.NOW【EMI百代】【WAV+CUE】
- 黄妃.2020-色違【米乐士娱乐】【FLAC分轨】
- LouisHayes-ArtformRevisited(2024)[24Bit-96kHz]FLAC
- 永恒英文金曲精选5《TheBestOfEverlastingFavouritesVol.5》[WAV+CUE]
- 黑鸭子2005-紫丁香[首版][WAV+CUE]
- 林忆莲《爱上一个不回家的人》XRCD版[低速原抓WAV+CUE][999M]
- 经典《历届奥斯卡金曲回顾》[正版原抓WAV+CUE] [1G]
- 群星《试音草原·女声篇》经典蒙古民歌[WAV+CUE][1G]
- 炉石传说月末上分卡组推荐 国服月末最快上分卡组推荐
- 炉石传说月底最强卡组有哪些 2024国服月底最强卡组推荐
- 炉石传说月初最强卡组有哪些 2024月初最强上分卡组推荐
- 狼人杀亮相原生鸿蒙之夜 假面科技强势登陆华为生态
- 12小时光线挑战!AI画质专家才是大平层首选