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 相关文章推荐
一个用js实现控制台控件的代码
Sep 04 Javascript
Jquery+JSon 无刷新分页实现代码
Apr 01 Javascript
JQuery操作表格(隔行着色,高亮显示,筛选数据)
Feb 23 Javascript
js简易namespace管理器 实例代码
Jun 21 Javascript
原生js页面滚动延迟加载图片
Dec 20 Javascript
AngularJS中如何使用$http对MongoLab数据表进行增删改查
Jan 23 Javascript
JavaScript事件学习小结(一)事件流
Jun 09 Javascript
详细讲解JavaScript中的this绑定
Oct 10 Javascript
vue父子组件的嵌套的示例代码
Sep 08 Javascript
iview在vue-cli3如何按需加载的方法
Oct 31 Javascript
vuex实现像调用模板方法一样调用Mutations方法
Nov 06 Javascript
Vue基础配置讲解
Nov 29 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
php db类库进行数据库操作
2009/03/19 PHP
浅谈php安全性需要注意的几点事项
2014/07/17 PHP
PHP采用自定义函数实现遍历目录下所有文件的方法
2014/08/19 PHP
ThinkPHP模版中导入CSS和JS文件的方法
2014/11/29 PHP
分享ThinkPHP3.2中关联查询解决思路
2015/09/20 PHP
Zend Framework实现留言本分页功能(附demo源码下载)
2016/03/22 PHP
用于table内容排序
2006/07/21 Javascript
Hutia 的 JS 代码集
2006/10/24 Javascript
jquery png 透明解决方案(推荐)
2010/08/21 Javascript
如何解决谷歌浏览器下jquery无法获取图片的尺寸
2015/09/10 Javascript
基于jquery实现鼠标滚轮驱动的图片切换效果
2015/10/26 Javascript
JavaScript实现的Tween算法及缓冲特效实例代码
2015/11/03 Javascript
轻松实现Bootstrap图片轮播
2020/04/20 Javascript
从零开始搭建webpack+react开发环境的详细步骤
2018/05/18 Javascript
微信小程序之onLaunch与onload异步问题详解
2019/03/28 Javascript
JavaScript实现下拉列表
2021/01/20 Javascript
python 从远程服务器下载日志文件的程序
2013/02/10 Python
jupyter安装小结
2016/03/13 Python
python八大排序算法速度实例对比
2017/12/06 Python
Python实现自动发送邮件功能
2021/03/02 Python
Flask 让jsonify返回的json串支持中文显示的方法
2018/03/26 Python
树莓派动作捕捉抓拍存储图像脚本
2019/06/22 Python
python2和python3实现在图片上加汉字的方法
2019/08/22 Python
基于python实现模拟数据结构模型
2020/06/12 Python
关于python3.7安装matplotlib始终无法成功的问题的解决
2020/07/28 Python
英国网上香水店:Fragrance Direct
2016/07/20 全球购物
韩国CJ食品专卖网:CJonmart
2016/09/11 全球购物
福克斯租车:Fox Rent A Car
2017/04/13 全球购物
The Kooples美国官方网站:为情侣提供的法国当代时尚品牌
2019/01/03 全球购物
UNIX文件系统分类
2014/11/11 面试题
初中化学教学反思
2014/01/23 职场文书
公司领导班子群众路线四风问题对照检查材料
2014/10/02 职场文书
奖金申请报告模板
2015/05/15 职场文书
红色电影观后感
2015/06/18 职场文书
2016年教师学习廉政准则心得体会
2016/01/20 职场文书
SQL Server内存机制浅探
2022/04/06 SQL Server