时间:2021-07-01 10:21:17 帮助过:10人阅读
思路:
登录:当用户填写完账号和密码后向服务端验证是否正确,验证通过之后,服务端会返回一个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>
结语:
权限这种事需要前后端结合,前端尽可能的去控制,记住:永远不相信用户输入!
以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!
相关推荐:
Vue使用Redux的方法
Vue+mui实现图片的本地缓存
vue路由拦截及页面跳转设置的方法介绍
以上就是基于Vue自定义指令实现按钮级权限控制的方法的详细内容,更多请关注Gxl网其它相关文章!