基于Vue自定义指令实现按钮级权限控制思路详解
网络编程 2021-07-04 16:45www.168986.cn编程入门
这篇文章主要介绍了基于vue自定义指令实现按钮级权限控制,本文给大家介绍的非常详细,感兴趣的朋友跟随狼蚁SEO长沙网络推广一起学习吧
思路
- 登录当用户填写完账号和密码后向服务端验证是否正确,验证通过之后,服务端会返回一个token,拿到token之后(我会将这个token存贮到sessionStorage中,保证刷新页面后能记住用户登录状态),前端会根据token再去拉取一个 user_info 的接口来获取用户的详细信息(如用户权限,用户名等等信息)。
- 权限验证通过token获取用户对应的 role,自定义指令,获取路由meta属性里btnPermissions( 注 meta.btnPermissions是存放按钮权限的数组,在路由表里配置 ),然后判断role是否在btnPermissions数组里,若不在即删除该按钮DOM。
按钮权限也可以用v-if判断,如果页面过多,每个页面页面都要获取用户权限role和路由表里的meta.btnPermissions,然后再做判断,感觉有点麻烦,而自定义指令,只需在权限按钮加入该指令即可。
废话不多说,上代码...
路由配置
path: '/permission', ponent: Layout, name: '权限测试', meta: { btnPermissions: ['admin','supper','normal'] }, //页面需要的权限 children: [ { path: 'supper', ponent: _import('system/supper'), name: '权限测试页', meta: { btnPermissions: ['admin','supper'] } //页面需要的权限 }, { path: 'normal', ponent: _import('system/normal'), name: '权限测试页', meta: { btnPermissions: ['admin'] } //页面需要的权限 } ]
自定义指令
import Vue from 'vue' /权限指令/ const has = Vue.directive('has', { bind: function (el, binding, vnode) { // 获取按钮权限 let btnPermissions = vnode.context.$route.meta.btnPermissions.split(","); if (!Vue.prototype.$_has(btnPermissions)) { el.parentNode.removeChild(el); } } }); // 权限检查方法 Vue.prototype.$_has = function (value) { let isExist = false; let btnPermissionsStr = sessionStorage.getItem("btnPermissions"); if (btnPermissionsStr == undefined || btnPermissionsStr == null) { return false; } if (value.indexOf(btnPermissionsStr) > -1) { isExist = true; } return isExist; }; export {has}
然后在main.js文件引入文件
import has from './public/js/btnPermissions.js';
页面中按钮只需加v-has即可
<el-button @click='editClick' type="primary" v-has>编辑</el-button>
权限这种事需要前后端结合,前端尽可能的去控制,记住永远不相信用户输入!
以上所述是长沙网络推广给大家介绍的基于Vue自定义指令实现按钮级权限控制,希望对大家有所帮助,如果大家有任何疑问请给我留言,长沙网络推广会及时回复大家的。在此也非常感谢大家对狼蚁SEO网站的支持!
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程:电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示:编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程