按钮鉴权的基本使用

系统中操做按钮鉴权

系统中用户动态菜单。

--动态菜单权限

系统中操做权限

---按钮鉴权

在封装的状态机的文件里面

后端在用户登录的时候返回当前用户的权限列表

定义的格式 后端定义

1.vuex-state.js

2.vuex-mutations-type.js

1. 全局注册自定义指令v-premission，在main.js文件里面

// 引入premission
import './components/premission'

4.vuex-mutations.js

export default {
     // 存储权限
    /**
     * @params  {数组  list}   list
     * **/
    [SAVE_PREMISSION_LIST](state,list){
        state.premissionList = list;
    }

}

5.在路由守卫里面在用户登录情况下获取权限

6.创建premission.js文件

/* 
自定义指令全局注册  按钮鉴权
*/
import Vue from "vue";
//引入store
import store from "../store";
//不带v-前缀
Vue.directive("premission", {
  //value  权限值  ['***']
  inserted(el, { value }) {
    //获取当前用户权限表
    let { premissionList } = store.state;
    //当前权限
    let prem = value[0];
    
    //当前用户获取的权限表为所有权限*
    if (premissionList[0] == "*") {
      return;
    }
    //检测当个权限
    let ishas = premissionList.indexOf(prem);
    //没有权限
    if (ishas == -1) {
      el.remove();
    }
    console.log("测试");
  },
});

7.在标签里面使用v-premission="[]"

 <el-button v-premission="['sys:user:delete1']"  type="danger">
批量删除
</el-button>