后台管理权限自定义按钮指令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">
            <div
              v-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-button
                v-if="item.viewBtn"
                type="text"
                @click="onView(scope.row)"
                class="check-btn"
              >
                查看
              </el-button>
              <el-button
                v-if="item.editBtn"
                type="text"
                @click="onEdit(scope.row)"
                class="edit-btn"
              >
                编辑
              </el-button>
              <el-button
                v-if="item.deleteBtn"
                type="text"
                @click="onDelete(scope.row.id)"
                class="del-btn"
              >
                删除
              </el-button>
              <el-button
                v-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">
                <div
                  v-for="(item1, index1) in scope.row.permissionList.slice(2)"
                  :key="index1"
                >
                  <el-dropdown-item v-if="item1.viewBtn">
                    <el-button
                      type="text"
                      @click="onView(scope.row)"
                      class="check-btn"
                    >
                      查看
                    </el-button>
                  </el-dropdown-item>
                  <el-dropdown-item v-if="item1.editBtn">
                    <el-button
                      type="text"
                      @click="onEdit(scope.row)"
                      class="edit-btn"
                    >
                      编辑
                    </el-button>
                  </el-dropdown-item>
                  <el-dropdown-item v-if="item1.deleteBtn">
                    <el-button
                      type="text"
                      @click="onDelete(scope.row.id)"
                      class="del-btn"
                    >
                      删除
                    </el-button>
                  </el-dropdown-item>
                  <el-dropdown-item v-if="item1.recordBtn">
                    <el-button
                      type="text"
                      @click="onRecord(scope.row)"
                      class="check-btn"
                    >
                      发证记录
                    </el-button>
                  </el-dropdown-item>
                </div>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>

完结!

相关推荐
老华带你飞23 分钟前
木里风景文化|基于Java+vue的木里风景文化管理平台的设计与实现(源码+数据库+文档)
java·数据库·vue.js·毕业设计·论文·风景·木里风景文化管理平台
ElasticPDF-新国产PDF编辑器1 小时前
Vue 项目使用 pdf.js 及 Elasticpdf 教程
javascript·vue.js·pdf
OpenTiny社区1 小时前
TinyPro 中后台管理系统使用指南——让页面搭建变得如此简单!
前端·vue.js·开源
我有一只臭臭2 小时前
webpack配置解析
前端·webpack
我有一只臭臭2 小时前
Vue中webpack的使用
前端·vue.js·webpack
今天也想MK代码2 小时前
ReFormX:现代化的 React 表单解决方案 - 深度解析与最佳实践
前端·react.js·性能优化
勘察加熊人2 小时前
vue记忆卡牌游戏
javascript·vue.js·游戏
醋醋3 小时前
Vue2源码记录3
前端·vue.js