zoukankan      html  css  js  c++  java
  • Vue自定义指令实现按钮级权限控制功能

    思路:

    1. 登录:当用户填写完账号和密码后向服务端验证是否正确,验证通过之后,服务端会返回一个token,拿到token之后(我会将这个token存贮到sessionStorage中,保证刷新页面后能记住用户登录状态),前端会根据token再去拉取一个 user_info 的接口来获取用户的详细信息(如用户权限,用户名等等信息)。
    2. 权限验证:通过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', {
        // 当被绑定的元素插入到 DOM 中时……
        inserted: function (el, binding, vnode) {
          let btnPermissions = '';
          // 获取指令按钮权限
          let characteristic = binding.value;
          if (characteristic) btnPermissions = characteristic;
          // 获取路由按钮权限
          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;
     }
    let res = value.filter((x) => {
      return btnPermissionsStr.include(x)
    })
    if (res.length > 0) isExist = truereturn isExist; };
    export {has}

    然后在main.js文件引入文件

    import has from './public/js/btnPermissions.js';

    页面中按钮只需加v-has即可

    <el-button @click='editClick' type="primary" v-has>编辑</el-button>

    权限前后端都可进行控制,但是尽可能的在前端就进行拦截验证。借用一句经典名言:永远不相信用户输入!

  • 相关阅读:
    axios+post获取并下载后台返回的二进制流
    vue+ckEditor5
    金额大写转换(改进版)
    vue+axios请求头封装
    移动端h5+vue失焦搜索,ios和android兼容问题
    vue滚动+滑动删除标记(移动端)仿qq/微信
    重置 centos 7 密码
    发现好玩的——github + git 有意思的用法
    github 中使用 issues
    java代理模式与装饰模式
  • 原文地址:https://www.cnblogs.com/leeke98/p/9458540.html
Copyright © 2011-2022 走看看