vue路由权限校验功能的实现代码


Posted in Javascript onJune 07, 2020

引言

做后台系统的时候,难免会有用户权限的判断。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()
 }
}

总结

到此这篇关于vue路由权限校验功能的实现代码的文章就介绍到这了,更多相关vue路由权限校验内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
Jquery命名冲突解决的五种方案分享
Mar 16 Javascript
jQuery中读取json文件示例代码
May 10 Javascript
js倒计时简单实现代码
Aug 11 Javascript
JS获取鼠标位置距浏览器窗口距离的方法示例
Apr 11 Javascript
AngularJS select设置默认值的实现方法
Aug 25 Javascript
打造通用的匀速运动框架(实例讲解)
Oct 17 Javascript
使用vue如何构建一个自动建站项目
Feb 05 Javascript
node中的session的具体使用
Sep 14 Javascript
微信小程序动画(Animation)的实现及执行步骤
Oct 28 Javascript
Vue自定义属性实例分析
Feb 23 Javascript
基于layui的table插件进行复选框联动功能的实现方法
Sep 19 Javascript
微信小程序实现菜单左右联动
May 19 Javascript
Vue使用自定义指令实现拖拽行为实例分析
Jun 06 #Javascript
JS原型对象操作实例分析
Jun 06 #Javascript
JS中的继承操作实例总结
Jun 06 #Javascript
ES6 async、await的基本使用方法示例
Jun 06 #Javascript
JS 数组和对象的深拷贝操作示例
Jun 06 #Javascript
ES6 Generator基本使用方法示例
Jun 06 #Javascript
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
Jun 06 #jQuery
You might like
在任意字符集下正常显示网页的方法一
2007/04/01 PHP
一个图形显示IP的PHP程序代码
2007/10/19 PHP
PHP+mysql实现从数据库获取下拉树功能示例
2017/01/06 PHP
extjs grid取到数据而不显示的解决
2008/12/29 Javascript
javascript 学习之旅 (3)
2009/02/05 Javascript
Extjs ajax同步请求时post方式参数发送方式
2009/08/05 Javascript
jQuery自带的一些常用方法总结
2014/09/03 Javascript
基于jquery固定于顶部的导航响应浏览器滚动条事件
2014/11/02 Javascript
javascript实现html页面之间参数传递的四种方法实例分析
2015/12/15 Javascript
第三章之Bootstrap 表格与按钮功能
2016/04/25 Javascript
jQuery如何封装输入框插件
2016/08/19 Javascript
微信小程序 实战小程序实例
2016/10/08 Javascript
vue中引用阿里字体图标的方法
2018/02/10 Javascript
vue裁切预览组件功能的实现步骤
2018/05/04 Javascript
vue单页应用的内存泄露定位和修复问题小结
2019/08/02 Javascript
vue实践---vue不依赖外部资源实现简单多语操作
2020/09/21 Javascript
[50:58]2018DOTA2亚洲邀请赛3月29日 小组赛A组OpTic VS Newbee
2018/03/30 DOTA
自动化Nginx服务器的反向代理的配置方法
2015/06/28 Python
对dataframe进行列相加,行相加的实例
2018/06/08 Python
Flask模板引擎之Jinja2语法介绍
2019/06/26 Python
django框架模板语言使用方法详解
2019/07/18 Python
tensorflow实现打印ckpt模型保存下的变量名称及变量值
2020/01/04 Python
python 正则表达式参数替换实例详解
2020/01/17 Python
Python面向对象程序设计之类和对象、实例变量、类变量用法分析
2020/03/23 Python
pycharm 关掉syntax检查操作
2020/06/09 Python
Pandas把dataframe或series转换成list的方法
2020/06/14 Python
如何用Python 实现全连接神经网络(Multi-layer Perceptron)
2020/10/15 Python
python 下划线的不同用法
2020/10/24 Python
Selenium关闭INFO:CONSOLE提示的解决
2020/12/07 Python
利用Python实现最小二乘法与梯度下降算法
2021/02/21 Python
英国时尚高尔夫服装购物网站:Trendy Golf
2020/01/10 全球购物
英文版区域经理求职信
2013/10/23 职场文书
大学校务公开实施方案
2014/03/31 职场文书
2014年体育部工作总结
2014/11/13 职场文书
区域销售经理岗位职责
2015/04/02 职场文书
变长双向rnn的正确使用姿势教学
2021/05/31 Python