Vue + ElementUI 手撸后台管理网站基本框架(二)权限控制
来源:互联网 发布:linux中tail命令 编辑:程序博客网 时间:2024/06/06 17:45
接口权限控制
页面权限控制
编写路由表
页面访问权限
页面元素操作权限
路由控制完整流程图
NEXT登录及系统菜单加载
后台管理系统中,权限控制一般分为两个部分。一个是接口访问的权限控制,一个是页面的权限控制。本章将讲述这两种权限控制如何实现。本章内容较多,请耐心阅读。
接口权限控制
相比于页面权限控制,接口权限控制简单很多,实现也很简单,所以写在最前。
接口权限控制说白了就是对用户的校验。正常来说,在用户登录时服务器应给前台返回一个token,以后前台每次调用接口时都需要带上这个token,服务端获取到这个token后进行比对,如果通过则可以访问。
我们通过对axios
进行简单的设置即可达到这种要求
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
将以上代码写到单独文件中,直接将在入口文件main.js
中注册到Vue原型上即可。这样在.vue
文件中直接使用this.$axios
即可。当然你也可以不这么做,在每个需要用到axios
的文件中单独引入也是可以的。
- 1
- 2
- 3
页面权限控制
在后台管理系统中,第一感觉最难最繁琐的可能就是权限控制了。在这里我们先简单梳理一下权限都有哪些方面。
页面权限主要分为两个部分
- 页面从根本上能否被访问
- 页面中的某些元素是否可以操作
页面能否被访问一般都是在登录后,直接获取该用户能访问的页面列表;或者返回该用户所在的权限组进行判断,但实际中权限组菜单也应该是在系统中可配置的,所以这种权限组追根究底还是和第一种情况一致。
页面元素是否可以操作一般都是在进入页面前再进行鉴权一次。这里一种方式是通过请求后台获取详细权限,或者是在上次获取页面列表的数据中直接带着该页面详细权限
根据以上分析,我们总结一下大致流程:
登录成功 ——> 获取用户能访问的页面列表(权限列表) ——> 根据返回数据生成菜单 ——> 点击菜单——> 进入页面前 ——> 读取权限列表中的该页面详细权限,判断元素操作权限 ——> 进入页面
在对流程梳理完成后我们开始进行详细的编写。
编写路由表
在上文中我们提到权限页面,但在实际中我们肯定有不需要权限,可直接访问的页面,比如登录页面、错误页面、维护页面等等。我们将这些不需要权限校验的页面写在默认路由中。同时建议把需要权限校验的页面写在另一个变量或者文件中以做区分,这样无论项目怎么变化你的代码改动量都会很少。
默认路由表,不需要权限
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
异步路由表,需要权限
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
以上为默认路由和异步路由的编写示例。其中针对component字段进行懒加载及分块处理,提升首屏加载速度的同时,也可以手动控制让某些页面合并到一个单独的js文件中,而不是每个页面都是一个js。
完整解释请参考官方文档:vue-router懒加载
某些细心的同学可能发现了,在异步路由表中,第一项貌似是无用数据,但其实并非如此,在下文中会涉及到,所以请不用着急
页面访问权限
还记得我们在上文说过的基本流程吗?我们先实现最核心的部分:获取权限列表——>根据返回数据生成菜单 原理上其实就是在路由跳转前获取权限列表,然后根据列表数据进行匹配,将匹配到的结果添加到原来的router
对象中
假设由服务器返回的权限列表数据如下,我们通过mockjs编写类似的数据
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
编写导航钩子
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
完成了核心功能后,我们需要对这个钩子进行完善。当前代码是页面每次调用时都请求一次权限列表,而且随着页面跳转变多,router对象也会越来越大,增加的东西也越来越多,而且还有BUG。还有就是我们的登录页面、维护页面、错误页面是不需要权限校验的。我们需要对核心部分外围增加条件判断。这里直接上代码,逻辑都在代码中。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
到这里我们已经完成了对页面访问的权限控制。接下来讲解页面元素操作权限。
页面元素操作权限
无论你的页面元素权限是在请求页面访问权限时的附属数据还是在进入前再次请求,其实现原理都是一样的。以第一种情况为例,我们把之前的返回数据修改一下
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
如果页面详细数据类似这种形式,和页面访问权限数据一同返回,那么只需要在之前的routerMatch
中进行判断,当然你也需要提前修改好默认路由表和异步路由表。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
接下来我们需要编写一个vue的插件,对页面中需要进行鉴权的元素进行判断,比如类似这样的:
- 1
- 2
我们可以直接写在每个页面的methods中,当然更好的方法是利用mixin直接混合到每个页面。利用mixin之前请确保你的方法是唯一的,因为这个方法会混合到任何vue组件中,不仅仅是你自己的,也包括第三方组件。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
至此为止,后台管理网站的权限控制流程就已经完全结束了,在最后我们再看一下完整的权限控制流程图吧。
路由控制完整流程图
NEXT——登录及系统菜单加载
- Vue + ElementUI 手撸后台管理网站基本框架(二)权限控制
- Vue + ElementUI 手撸后台管理网站基本框架(二)权限控制
- Vue + ElementUI 手撸后台管理网站基本框架(三)登录及系统菜单加载
- Vue + ElementUI 手撸后台管理网站基本框架(零)前言篇
- Vue + ElementUI 手撸后台管理网站基本框架(一)创建项目
- webpack+vue+elementui构建后台管理系统
- webpack+vue.js+elementUI试做后台管理页面
- 二十、管理后台的权限控制
- 后台管理框架vue
- vue入门 | 使用vue.js2.0 + ElementUI开发后台管理系统详细教程(一)
- 基于Vue实现后台系统权限控制
- 基于Vue实现后台系统权限控制
- vue2.0+elementUI 后台管理系统日记
- 一步步带你做vue后台管理框架(二)——上手使用
- 一步步带你做vue后台管理框架(二)——上手使用
- 后台权限管理控制shiro+jsonMenu
- Yii2框架管理后台权限设置机制
- 手摸手,带你用vue撸后台 系列二(登录权限篇)
- tensorflow c/c++库使用方法
- Java 线程 4
- 拉里·埃里森亲自支招,数据库自动化之后,DBA何去何从?
- 关于ImageLoader的使用将图片改变为圆形
- 1190: [HNOI2007]梦幻岛宝珠
- Vue + ElementUI 手撸后台管理网站基本框架(二)权限控制
- 蓝桥杯:世纪末的星期天
- 机器学习算法之逻辑回归
- 关于python的基础知识17 -- 列表、数组和矩阵
- 创投日报:10月31日收录投融资项目14起
- 安卓手机文件管理的照片删了怎么找回的轻松恢复方法
- 因乐视网IPO财务造假,多位发审委委员被抓;旷视科技完成 4.6亿美元C轮融资丨价值早报
- Android自定义控件5----继承View通讯录索引功能之4在下按和移动时,列表更新
- sourceTree安装问题