Vue 实现前端权限控制的示例代码


Posted in Javascript onJuly 09, 2019

登录&&权限流程图

Vue 实现前端权限控制的示例代码

前言

首先我们确定的权限控制分为三大部分,其中根据粒度大小分的更细:

  • 登录权限控制
  • 页面权限控制
    • 菜单中的页面是否可以被访问
    • 页面中的按钮 (增、删、改、查)的权限控制是否显示
  • 接口权限控制

一、登录权限控制

登录访问权限控制是对用户的校验。在用户登录成功之后,后台将返回一个token,之后前端每次进行接口请求的时候,都要带上这个token。后台拿到这个token后进行判断,如果此token确实存在并且没有过期,则可以通过访问。如果token不存在或后台判断已过期,则会跳转到登录页面,要求用户重新登录获取token。

做法一

在用户登录成功的回调中将后台返回的token直接存储到localStorage,然后同步配置请求默认参数的形式将token取出放入headers中传给后台。代码如下:

let axiosOptions = {
   method,
   url,
   data,
   timeout,
   // 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'。default json
   responseType,
   // 请求头内追加authToken属性
   headers: {
    authtToken: window.localStorage.getItem(`base/token$$`)
   }
  }

做法二

当前项目中使用axios.interceptors.request.use设置发送请求前的拦截,直接将token塞入req.headers.authToken中,作为全局传入。代码如下:

// axios.interceptors.request.use 请求拦截:配置发送请求的信息
// axios.interceptors.response.use 响应拦截:配置请求回来的信息

axios.interceptors.request.use(req => {
 req.headers.authToken = window.localStorage.getItem(`base/token$$`)
 return req
}, error => {
 return Promise.reject(error)
})

登录涉及到的知识点

  • vuex + localStorage: 本地通过vuex+localStorage持久化存储token(token:服务端创建用于唯一标识用户身份的Key)。
  • axios: 请求拦截验证token,可以使用axios的API:axios.interceptors.request.use,也可以通过添加默认参数的形式在请求头中追加token。

二、页面权限控制

上面已经说到,页面权限控制又分为两种:

  • 菜单中的页面是否可以被访问
  • 页面中的按钮 (增、删、改、查)的权限控制是否显示

先看菜单的页面访问权限

实现页面访问权限又可分为以下两种方案:

  • 方案一、初始化即挂载全部路由,每次路由跳转前做校验
  • 方案二、只挂载当前用户拥有的路由,如果用户通过URL进行强制访问,则会直接进入404,相当于从源头上做了控制

前者的缺点很明显,每次路由跳转都要做一遍检验是对计算资源的浪费,另外对于用户无权访问的路由,理论上就不应该挂载。

后者解决了上述问题,但按需挂载路由就需要知道用户的路由权限,也就是在用户登录进来的时候就要知道当前用户拥有哪些路由权限。

所以肯定是方案二比较符合良好的用户体验。

项目中的菜单权限控制

1.权限涉及到的meta属性

  • noRequireAuth: true 无需权限直接挂载
  • manageFree: true 不在操作权限树中展示

2.router.beforeEach()拦截路由的钩子

  • 不需要权限的路由直接放行。meta内noRequireAuth和manageFree不受权限控制
  • 进入路由前,从后端请求获取需要展示的菜单。后端根据token判断当前用户权限,返回对应菜单。前端递归对比确定最终要显示的菜单列表

3.router.addRoutes()

  • 通过router.addRoutes()动态添加所有符合权限的路由

按钮级权限控制(Vue指令v-permission)

1.每个模块对应有四种权限,查询(get),添加(post),更新(put),删除(delete)
2.利用十进制和二进制来表示当前模块所拥有的权限。1111(15),转换后的二进制与权限的关系表示:从右至左数(1代表拥有该权限,0代表不拥有),第一位代表查询,第二位代表添加,第三位代表更新,第四位代表删除。如eg:二进制1111(15),代表用于查询,添加,更新,删除四种权限。

3.判断对应模块没有此权限时,移除当前按钮dom元素。

使用示例:

<el-button @click="handleClick" v-permission:moduleName.post>新增</el-button>
 <el-button @click="handleClick" v-permission.delete="moduleName">删除</el-button>

三、接口访问权限控制

最后再加上请求控制作为最后一道防线,路由可能配置失误,按钮可能忘了加权限,这种时候请求控制可以用来兜底,越权请求将在前端被拦截。

前后端约定接口采用RESTful风格,同样对应四种权限,包括查询(get),添加(post),更新(put),删除(delete)。对于查询操作,正常如果参数只有一个,应该用get请求,如果有多个参数,需要改为post请求,但是需要在url后面添加/query以告诉服务端当前进行的是查询操作,用于和正常的添加(post)请求区分。同样的是,删除用户时如果有多个参数,DELETE请求同样改为POST请求,在后面添加/delete用于和正常的删除(delete)操作进行区分。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript模块模式分析
May 16 Javascript
javascript开发技术大全 第4章 直接量与字符集
Jul 03 Javascript
javascript获取隐藏元素(display:none)的高度和宽度的方法
Jun 06 Javascript
jQuery简单实现网页选项卡特效
Nov 24 Javascript
jQuery Ajax 全局调用封装实例代码详解
Jun 02 Javascript
AngularJS 中文API参考手册
Jul 28 Javascript
jQuery实现的多张图无缝滚动效果【测试可用】
Sep 12 Javascript
第一次动手实现bootstrap table分页效果
Sep 22 Javascript
运用js教你轻松制作html音乐播放器
Apr 17 Javascript
jQuery实现对象转为url参数的方法
Jan 11 Javascript
jQuery初级教程之网站品牌列表效果
Aug 02 jQuery
vue中全局路由守卫中替代this操作(this.$store/this.$vux)
Jul 24 Javascript
微信小程序文章详情页跳转案例详解
Jul 09 #Javascript
七行JSON代码把你的网站变成移动应用过程详解
Jul 09 #Javascript
js实现无缝滚动双图切换效果
Jul 09 #Javascript
DatePickerDialog 自定义样式及使用全解
Jul 09 #Javascript
bootstrap 日期控件 datepicker被弹出框dialog覆盖的解决办法
Jul 09 #Javascript
bootstrap datepicker的基本使用教程
Jul 09 #Javascript
JavaScript常用内置对象用法分析
Jul 09 #Javascript
You might like
phpfans留言版用到的install.php
2007/01/04 PHP
dedecms系统常用术语汇总
2007/04/03 PHP
用Zend Encode编写开发PHP程序
2010/02/21 PHP
PHP与C#分别格式化文件大小的代码
2011/05/14 PHP
浅析使用Turck-mmcache编译来加速、优化PHP代码
2013/06/20 PHP
PHP解析RSS的方法
2015/03/05 PHP
PHP中set error handler函数用法小结
2015/11/11 PHP
PHP使用redis实现统计缓存mysql压力的方法
2015/11/14 PHP
两种php实现图片上传的方法
2016/01/22 PHP
JS+PHP实现用户输入数字后显示最大的值及所在位置
2017/06/19 PHP
yii2局部关闭(开启)csrf的验证的实例代码
2017/07/10 PHP
PHP检查网站是否宕机的方法示例
2017/07/24 PHP
Laravel框架分页实现方法分析
2018/06/12 PHP
PHP curl批处理及多请求并发实现方法分析
2018/08/15 PHP
js将iframe中控件的值传到主页面控件中的实现方法
2013/03/11 Javascript
ie 7/8不支持trim的属性的解决方案
2014/05/23 Javascript
jquery引用方法时传递参数原理分析
2014/10/13 Javascript
javascript实现简单的二级联动
2015/03/19 Javascript
Vue.js基础知识汇总
2016/04/27 Javascript
Jquery on方法绑定事件后执行多次的解决方法
2016/06/02 Javascript
Bootstrap Table服务器分页与在线编辑应用总结
2016/08/08 Javascript
移动端js触摸事件详解
2016/09/18 Javascript
Bootstrap基本插件学习笔记之折叠(22)
2016/12/08 Javascript
vue动态绑定组件子父组件多表单验证功能的实现代码
2018/05/14 Javascript
jQuery擦除插件eraser使用方法详解
2020/01/11 jQuery
selenium 反爬虫之跳过淘宝滑块验证功能的实现代码
2020/08/27 Javascript
Python读取properties配置文件操作示例
2018/03/29 Python
Python 中判断列表是否为空的方法
2019/11/24 Python
Python 读取 YUV(NV12) 视频文件实例
2019/12/09 Python
Python下利用BeautifulSoup解析HTML的实现
2020/01/17 Python
Python 实现网课实时监控自动签到、打卡功能
2020/03/12 Python
澳大利亚领先的孕妇服装品牌:Mamaway
2018/08/14 全球购物
英国网上电器商店:Electricshop
2020/03/15 全球购物
什么是方法的重载
2013/06/24 面试题
地球物理学专业推荐信
2014/09/08 职场文书
科级干部群众路线教育实践活动对照检查材料思想汇报
2014/09/20 职场文书