vue3如何实现权限按钮

Vue3 可以通过自定义指令、组件和路由守卫等方式实现权限按钮。

1. 自定义指令

可以通过自定义指令来控制按钮的显示和隐藏。首先，在全局注册一个指令：

app.directive("permission", {
  mounted(el, binding) {
    const permissions = binding.value; // 获取指令的值，即需要的权限
    const userPermissions = ['xxx', 'yyy', 'zzz']; // 获取用户的权限
    if (!userPermissions.includes(permissions)) {
      el.style.display = "none"; // 如果用户没有该权限，则隐藏按钮
    }
  },
});

然后在需要控制权限的按钮上使用指令：

<button v-permission="'xxx'">按钮</button>

2. 组件

如果需要在多个地方使用权限按钮，可以将按钮封装成组件。首先定义一个权限按钮组件：

<template>
  <button v-if="isShow" @click="$emit('click')">
    {{ text }}
  </button>
</template>

<script>
export default {
  props: {
    permission: {
      type: String,
      required: true,
    },
    text: {
      type: String,
      required: true,
    },
  },
  computed: {
    isShow() {
      const userPermissions = ['xxx', 'yyy', 'zzz']; // 获取用户的权限
      return userPermissions.includes(this.permission); // 判断用户是否有该权限
    },
  },
};
</script>

然后在需要使用的地方引入组件：

<template>
  <div>
    <permission-button permission="xxx" text="按钮1" @click="handleClick1" />
    <permission-button permission="yyy" text="按钮2" @click="handleClick2" />
    <permission-button permission="zzz" text="按钮3" @click="handleClick3" />
  </div>
</template>

<script>
import PermissionButton from "./PermissionButton.vue";

export default {
  components: {
    PermissionButton,
  },
  methods: {
    handleClick1() {
      // 处理点击事件
    },
    handleClick2() {
      // 处理点击事件
    },
    handleClick3() {
      // 处理点击事件
    },
  },
};
</script>

3. 路由守卫

如果需要控制整个页面或者路由的访问权限，可以使用路由守卫。在路由配置中定义一个 meta 字段用于存储需要的权限：

const routes = [
  {
    path: "/",
    component: Home,
    meta: {
      permission: "xxx",
    },
  },
  {
    path: "/about",
    component: About,
    meta: {
      permission: "yyy",
    },
  },
];

然后在全局注册一个路由守卫，在路由切换前判断用户是否有访问该路由的权限：

router.beforeEach((to, from, next) => {
  const permission = to.meta.permission;
  const userPermissions = ['xxx', 'yyy', 'zzz']; // 获取用户的权限
  if (permission && !userPermissions.includes(permission)) {
    next("/error"); // 如果用户没有该权限，则跳转到错误页面
  } else {
    next();
  }
});