基于Vue自定义指令实现按钮级权限控制思路详解
2018-05-23 10:46
776 查看
思路:
- 登录:当用户填写完账号和密码后向服务端验证是否正确,验证通过之后,服务端会返回一个token,拿到token之后(我会将这个token存贮到sessionStorage中,保证刷新页面后能记住用户登录状态),前端会根据token再去拉取一个 user_info 的接口来获取用户的详细信息(如用户权限,用户名等等信息)。
- 权限验证:通过token获取用户对应的 role,自定义指令,获取路由meta属性里btnPermissions( 注: meta.btnPermissions是存放按钮权限的数组,在路由表里配置 ),然后判断role是否在btnPermissions数组里,若不在即删除该按钮DOM。
按钮权限也可以用v-if判断,但是如果页面过多,每个页面页面都要获取用户权限role和路由表里的meta.btnPermissions,然后再做判断,感觉有点麻烦,而自定义指令,只需在权限按钮加入该指令即可。
废话不多说,上代码...
路由配置:
path: '/permission', component: Layout, name: '权限测试', meta: { btnPermissions: ['admin','supper','normal'] }, //页面需要的权限 children: [ { path: 'supper', component: _import('system/supper'), name: '权限测试页', meta: { btnPermissions: ['admin','supper'] } //页面需要的权限 }, { path: 'normal', component: _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自定义指令实现按钮级权限控制,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
您可能感兴趣的文章:
相关文章推荐
- 详解vue + vuex + directives实现权限按钮的思路
- 详解基于vue-router的动态权限控制实现方案
- 在ASP.NET MVC中实现基于URL的权限控制
- ThinkPHP的RBAC(基于角色权限控制)详解
- angular基于ui-router实现系统权限控制
- [置顶] 基于Vue实现后台系统权限控制
- 基于MVC框架实现权限控制简介
- 基于角色的访问控制'的权限管理的数据库的设计实现
- 基于SSH2增删改查_控制层Action_Spring Aop权限控制基本实现(6)
- Android仿知乎客户端关注和取消关注的按钮点击特效实现思路详解
- ThinkPHP的RBAC(基于角色权限控制)详解
- thinkphp基于角色的权限控制详解
- 基于Acegi权限控制的思路
- 权限管理:RBAC(基于角色的访问控制)SpringMVC实现
- ThinkPHP的RBAC(基于角色权限控制)详解(转)
- 基于Vue实现后台系统权限控制
- struts2 使用注解、反射、拦截器实现基于方法的权限控制
- 基于Vue实现后台系统权限控制
- 基于角色-功能-资源的权限控制模型的设计与实现-引子
- ASP.NET MVC 中如何实现基于角色的权限控制