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 相关文章推荐
关于JavaScript中的关联数组分析
Apr 09 Javascript
javascript获取url上某个参数的方法
Nov 08 Javascript
JavaScript实现将数组中所有元素连接成一个字符串的方法
Apr 06 Javascript
JavaScript数据结构与算法之集合(Set)
Jan 29 Javascript
js实现文字选中分享功能
Jan 25 Javascript
bootstrap multiselect 多选功能实现方法
Jun 05 Javascript
示例vue 的keep-alive缓存功能的实现
Dec 13 Javascript
JavaScript函数的特性与应用实践深入详解
Dec 30 Javascript
详解json串反转义(消除反斜杠)
Aug 12 Javascript
vue中watch和computed为什么能监听到数据的改变以及不同之处
Dec 27 Javascript
浅析vue中的nextTick
Dec 28 Vue.js
手动实现vue2.0的双向数据绑定原理详解
Feb 06 Vue.js
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
用libtemplate实现静态网页生成
2006/10/09 PHP
生成php程序的php代码
2008/04/07 PHP
PHP 判断变量类型实现代码
2009/10/23 PHP
php模板引擎技术简单实现
2016/03/15 PHP
PHP在linux上执行外部命令的方法
2017/02/06 PHP
PHP实现求两个字符串最长公共子串的方法示例
2017/11/17 PHP
thinkPHP5使用Rabc实现权限管理
2019/08/28 PHP
javascript动态加载二
2012/08/22 Javascript
浅谈JavaScript数据类型及转换
2015/02/28 Javascript
JavaScript通过字典进行字符串翻译转换的方法
2015/03/19 Javascript
jquery合并表格中相同文本的相邻单元格
2015/07/17 Javascript
JQuery日历插件My97DatePicker日期范围限制
2016/01/20 Javascript
Javascript字符串常用方法详解
2016/07/21 Javascript
Web性能优化系列 10个提升JavaScript性能的技巧
2016/09/27 Javascript
JS实现处理时间,年月日,星期的公共方法示例
2019/05/31 Javascript
解决vue中使用proxy配置不同端口和ip接口问题
2019/08/14 Javascript
跟老齐学Python之坑爹的字符编码
2014/09/28 Python
python字典排序实例详解
2015/05/20 Python
利用Python操作消息队列RabbitMQ的方法教程
2017/07/19 Python
python实现list由于numpy array的转换
2018/04/04 Python
python使用正则筛选信用卡
2019/01/27 Python
解决Django生产环境无法加载静态文件问题的解决
2019/04/23 Python
python pytest进阶之fixture详解
2019/06/27 Python
python实现KNN分类算法
2019/10/16 Python
基于Python和C++实现删除链表的节点
2020/07/06 Python
Foot Locker意大利官网:全球领先的运动鞋和服装零售商
2017/05/30 全球购物
幼儿园开学寄语
2014/04/03 职场文书
《春雨》教学反思
2014/04/24 职场文书
社团活动总结范文
2014/04/26 职场文书
初中生旷课检讨书范文
2014/10/06 职场文书
给老婆道歉的话
2015/01/20 职场文书
经理岗位职责
2015/02/02 职场文书
《蚂蚁和蝈蝈》教学反思
2016/02/22 职场文书
史上最全书信经典范文大全(建议收藏)
2019/07/10 职场文书
Python机器学习应用之基于线性判别模型的分类篇详解
2022/01/18 Python
ECharts transform数据转换和dataZoom在项目中使用
2022/12/24 Javascript