vue实现页面权限显示_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),代表用于查询,添加,更新,删除四种权限。
判断对应模块没有此权限时,移除当前按钮dom元素。
使用示例:
新增
删除
复制代码
三、接口访问权限控制
最后再加上请求控制作为最后一道防线,路由可能配置失误,按钮可能忘了加权限,这种时候请求控制可以用来兜底,越权请求将在前端被拦截。
前后端约定接口采用RESTful风格,同样对应四种权限,包括查询(get),添加(post),更新(put),删除(delete)。对于查询操作,正常如果参数只有一个,应该用get请求,如果有多个参数,需要改为post请求,但是需要在url后面添加/query以告诉服务端当前进行的是查询操作,用于和正常的添加(post)请求区分。同样的是,删除用户时如果有多个参数,DELETE请求同样改为POST请求,在后面添加/delete用于和正常的删除(delete)操作进行区分。
参考链接
vue实现页面权限显示_Vue 实现前端权限控制相关推荐
- vue实现页面权限显示_vue实现菜单权限控制
大家在做后台管理系统时一般都会涉及到菜单的权限控制问题.当然解决问题的方法无非两种--前端控制和后端控制.我们公司这边的产品迭代速度较快,所以我们是从前端控制路由迭代到后端控制路由.下面我会分别介绍这 ...
- vue设置页面滚动高度_vue 解决无法设置滚动位置的问题
问题描述 在实现锚点定位的时候发现无法设置滚动条的位置. 在Vue中,使用 document.body.scrollTop=952 无法设置滚动条的高度. document.body.scrollTo ...
- js实现在页面实时显示时间,一个按钮控制时间暂停和开始
js实现在html实时显示时间,一个按钮控制时间暂停和开始.代码如下: <head><meta charset="UTF-8"><title>& ...
- vue保存页面的值_vue前端页面跳转参数传递及存储
不同页面间进行参数传递,实现方式有很多种,最简单最直接的方式就是在页面跳转时通过路由传递参数,如下所示. 路由传递参数 this.$router.push({ name: '跳入页面', params ...
- vue 切换页面没有改变滚动条_Web前端高级Vue学习笔记(三)
大家好,我是轻风乍起,本人从事前端8年了,总结了很多学习资料,有时间我会普及一些入门和提升建议,思想提升了,路线明确了自然就好了,于是就整理了一些学习笔记, 供大家学习,干货福利内容 在文末↓ 名称1 ...
- vue 实现数据滚动显示_vue 滚动加载数据
table数据多的时候打开页面会加载一会才显示数据,这样体验不好,所以要做滚动加载数据 {{eventMap[scope.row.eventId] == null ? '--': eventMap[s ...
- vue devtools面板没有显示_vue 基础入门(四)
vue 基础入门(四) 1.全局配置 Vue.config 是一个对象,包含 Vue 的全局配置.可以在启动应用之前修改下列 property: 1.1 silent 类型:boolean 默认值:f ...
- vue 实现数据滚动显示_vue实现动态添加数据滚动条自动滚动到底部的示例代码...
在使用vue实现聊天页面的时候,聊天数据动态加到页面中,需要实现滚动条也自动滚动到底部.这时我找到网上有个插件 vue-chat-scroll 但是安装后发现是用不了的,报错信息如下: VM14383 ...
- vue保存页面的值_vue中使用localStorage存储信息
一 什么是localStorage 对浏览器来说,使用 Web Storage 存储键值对比存储 Cookie 方式更直观,而且容量更大,它包含两种:localStorage 和 sessionSto ...
最新文章
- 批量scp脚本——从多台机器拷贝文件
- python中e-r图_E-R图基本步骤
- 消息队列服务器 轻量,PHP的轻量消息队列php-resque使用说明
- 官方回应 ,清华大学对于造假的处理结果来了:一作撤销博士学位,导师停止招生资格及提前退休...
- Laravel项目迁移步骤
- 带你详细了解机器视觉竞赛—ILSVRC竞赛
- java的程序编码_Java 程序编码规范(初学者要牢记)
- Kaldi语音识别快速入门
- Django 工作流程
- 《Windows CE嵌入式开发入门——基于Xscale架构》 第8章 调试与仿真
- 以过来人身份给新手博主站长的几点小建议
- matlab得到小波参数,MATLAB|高频信号的小波分析技术要点
- word大括号中公式左对齐
- png转bmp,png批量转成bmp
- 轻松了解,顶级域名,二级域名,三级域名
- 如何启用计算机网络共享,无法启用共享访问,教您无法启用共享访问怎么解决...
- 网红直播营销现状及对策研究
- 整理《我三年开发经验,从字节跳动抖音组离职后,一口气拿到15家公司Offer》
- Scala为什么是大数据第一高薪语言
- What is outlier?