526互联

el-tbs 权限控制

发布时间 2023-11-27 17:16:25作者: Cxymds

1. 需求

  • 需求：实现一个 el-tabs 的权限控制，只有管理员才能操作，普通用户既看不到也不能操作

2. 分析

一般要实现按钮权限控制都是使用封装指令 v-permission 指令，但是类似“Tabs”这类组件不能使用 v-permission 指令实现权限控制。

因为 v-permission 底层是实现 dom 的删除，而不是像 el-tab-pane 这种组件删除，这种组件后面渲染可能会产生更多的 dom 或者是容器。所以，这种可以使用 v-if 来删除。

3. 实现思路（一）

  • 实现思路： 使用 v-if 来控制组件的显示和隐藏

  • 步骤：

    1. 定义一个变量，用来判断当前用户是否是管理员
    2. 在 el-tabs 的 data 中定义一个变量，用来判断当前用户是否是管理员
    3. 在 el-tabs 的 template 中使用 v-if 来控制组件的显示和隐藏

代码实现

<template>
  <el-tabs v-model="activeName" type="card">
    <el-tab-pane v-if="isAdmin" label="用户管理" name="user">
      <el-button type="primary">用户管理</el-button>
    </el-tab-pane>
    <el-tab-pane v-if="isAdmin" label="角色管理" name="role">
      <el-button type="primary">角色管理</el-button>
    </el-tab-pane>
    <el-tab-pane v-if="isAdmin" label="权限管理" name="permission">
      <el-button type="primary">权限管理</el-button>
    </el-tab-pane>
  </el-tabs>
</template>

4. 实现思路（二）

  • 实现思路： 使用 v-for 来控制组件的显示和隐藏
  • 步骤：
    1. 定义一个变量，用于存储 el-tab-pane 组件的数组
    2. 封装一个过滤函数，用来判断当前用户是否是具有权限
    3. 在 el-tabs 的 template 中使用 v-for 来控制组件的显示和隐藏
    4. 使用过滤函数进行权限过滤

代码实现

<el-tabs class="demo-tabs" @tab-change="changeTab">
  <el-tab-pane
    v-for="item in options.tabs.filter(item => checkPermission(item.premission))"
    :key="item.value"
    :label="item.label"
    :name="item.value"
    lazy
  >
    <component :is="item.comName"></component>
  </el-tab-pane>
</el-tabs>

import { ComA, ComB } from "./components";
import checkPermission from "@/hooks/permisson";

// tabs选项
const options = reactive({
  tabs: [
    {
      label: "A",
      value: "comA",
      //   组件
      comName: markRaw(ComA),
      premission: true,
    },
    {
      label: "B",
      value: "comB",
      comName: markRaw(ComB),
      premission: "operation:comb:show",
    },
  ],
});

过滤函数

import { useUserStore } from "@/pinia";

const checkPermission = (permission) => {
  //如果传入布尔值true，则直接返回true
  if (permission === true) return true;
  const userStore = useUserStore();
  //   判断是否具有权限
  if (userStore.buttons.includes(permission)) {
    return true;
  }
  return false;
};
export default checkPermission;