后台管理权限自定义按钮指令v-hasPermi

第一步:在src下面建立一个自定义指令文件,放自定义指令方法

permission.js文件:

/*** v-hasPermi 操作权限处理*/import store from "@/store";export default {inserted(el, binding) {const { value } = binding;//从仓库里面获取到后台给的数组const permission = store.getters && store.getters.permissions;console.log("permission===", permission);if (value && Array.isArray(value) && value.length > 0) {const hasPermissions = permission.some((item) => {return value.includes(item.perms);});if (!hasPermissions) {el.parentNode && el.parentNode.removeChild(el);}} else {throw new Error(`未设置权限`);}},
};

index.js文件:

import hasPermi from './permission'const install = function(Vue) {Vue.directive('hasPermi', hasPermi)
}export default install

后端返回的数据结构:

第二步:在main.js里面引入注册自定义指令

 

// 自定义指令
import directives from "./directives/index";
Vue.use(directives);

第三步:vuex仓库里面存放后端接口返回的用于控制权限按钮的数组 

 

 vuex里面需要用到的三个文件,可根据自身需求进行添加:

user.js

import { userInfo } from "@/api/system/login";
//封装的统一存本地的方法,可自行添加
import { mySessionStorage } from "../../../utils/encryption";const user = {state: {permissions: mySessionStorage.getItem("permissionArray") || [],},actions: {// 获取用户信息getUserInfo({ commit }) {return new Promise(async (resolve, reject) => {try {const res = await userInfo();if (res.code === 200) {commit("SET_PERMISSION", res.data.authorities);resolve(res);} else {reject(res);}} catch (error) {reject(error);}});},},mutations: {SET_PERMISSION: (state, permission) => {state.permission = permission || [];//把获取到的路由存本地mySessionStorage.setItem("permissionArray", state.permission);},},
};
export default user;

index.js

import Vue from "vue";
import Vuex from "vuex";
import user from "./modules/user";
import getters from "./getters";Vue.use(Vuex);
const store = new Vuex.Store({modules: {user,},getters,
});export default store;

getters.js

const getters = {permissions: (state) => state.Layout_store.permissions,
};
export default getters;

user.js里面的getUserInfo函数放在合适的地方调用,这里是放在登录页面:

 关于页面使用:

 关于页面操作按钮过多,固定展示两个,其他放入更多里面:

首先utils里面定义一个函数计算权限:

import store from "@/store";

// 校验权限

export const hasPermi = (arr) => {

  return store.getters.permission.some((role) => {

    return arr.includes(role);

  });

};

页面使用:

import { hasPermi } from '@/util/util'

   // 获取table数据

    async getTableLists() {

      this.loading = true

      const params = {

        ...this.queryForm,

        ...this.form,

        startTime: this.startTime,

        endTime: this.endTime,

      }

      delete params.time

      const res = await certificateList(params)

      if (res.code === 200) {

        this.tableData = res.data.records

        this.tableData = res.data.records.map((item) => {

          item.permissionList = []

          if (hasPermi(['certificate_view'])) {

            item.permissionList.push({ viewBtn: true })

          }

          if (hasPermi(['certificate_edit']) && item.issueSize == 0) {

            item.permissionList.push({ editBtn: true })

          }

          if (hasPermi(['certificate_delete'])) {

            item.permissionList.push({ deleteBtn: true })

          }

          if (hasPermi(['certificate_record'])) {

            item.permissionList.push({ recordBtn: true })

          }

          return item

        })

        this.total = parseInt(res.data.total)

        this.loading = false

      } else {

        this.$message.error(res.msg)

        this.loading = false

      }

    },

html代码:

   <el-table-column align="center" label="操作" fixed="right" width="200"><template slot-scope="scope"><divv-for="(item, index) in scope.row.permissionList.length > 3? scope.row.permissionList.slice(0, 2): scope.row.permissionList":key="index"style="display: inline-block; margin-right: 10px;"><el-buttonv-if="item.viewBtn"type="text"@click="onView(scope.row)"class="check-btn">查看</el-button><el-buttonv-if="item.editBtn"type="text"@click="onEdit(scope.row)"class="edit-btn">编辑</el-button><el-buttonv-if="item.deleteBtn"type="text"@click="onDelete(scope.row.id)"class="del-btn">删除</el-button><el-buttonv-if="item.recordBtn"type="text"@click="onRecord(scope.row)"class="check-btn">发证记录</el-button></div><el-dropdown v-if="scope.row.permissionList.length > 3"><el-button type="text" size="medium" class="more-btn mr10">更多</el-button><el-dropdown-menu slot="dropdown"><divv-for="(item1, index1) in scope.row.permissionList.slice(2)":key="index1"><el-dropdown-item v-if="item1.viewBtn"><el-buttontype="text"@click="onView(scope.row)"class="check-btn">查看</el-button></el-dropdown-item><el-dropdown-item v-if="item1.editBtn"><el-buttontype="text"@click="onEdit(scope.row)"class="edit-btn">编辑</el-button></el-dropdown-item><el-dropdown-item v-if="item1.deleteBtn"><el-buttontype="text"@click="onDelete(scope.row.id)"class="del-btn">删除</el-button></el-dropdown-item><el-dropdown-item v-if="item1.recordBtn"><el-buttontype="text"@click="onRecord(scope.row)"class="check-btn">发证记录</el-button></el-dropdown-item></div></el-dropdown-menu></el-dropdown></template></el-table-column>

 完结!