vue3+pinia前端权限设置

在 Vue3 中，你可以使用 Pinia 来管理应用程序的状态。要设置前端权限，你可以使用以下步骤：

1. 定义你的权限列表

在你的应用程序中，你需要定义一份权限列表，它应该包含你的应用程序中所有的权限。

例如：

const permissions = {
  viewPage1: '可以查看页面1',
  viewPage2: '可以查看页面2',
  editPage1: '可以编辑页面1',
  editPage2: '可以编辑页面2',
};

2. 定义你的 store

使用 Pinia，你可以定义一个 store 来管理你的应用程序的状态。

例如：

import { defineStore } from 'pinia';

export const store = defineStore({
  id: 'app',
  state: () => ({
    user: null,
    permissions: [],
  }),

  getters: {
    hasPermission: (state) => (permission) => {
      return state.permissions.includes(permission);
    },
  },

  actions: {
    login(user) {
      this.user = user;
      this.permissions = user.permissions;
    },

    logout() {
      this.user = null;
      this.permissions = [];
    },
  },
});

在这个 store 中，我们定义了两个状态：`user` 和 `permissions`。当用户登录时，我们会将用户的权限设置到 `permissions` 状态中。

我们还定义了一个 `hasPermission` 的 getter，它接收一个权限名称作为参数，并返回一个布尔值，表明当前用户是否有该权限。

3. 在组件中使用 store

在你的组件中，你可以使用 `computed` 属性来获取当前用户是否有权限。

例如：

<template>
  <div v-if="hasViewPage1Permission">可以查看页面1</div>
  <div v-if="hasEditPage1Permission">可以编辑页面1</div>
</template>

<script>
import { computed } from 'vue';
import { useStore } from 'pinia';

export default {
  setup() {
    const store = useStore();

    const hasViewPage1Permission = computed(() =>
      store.getters.hasPermission('viewPage1')
    );
    const hasEditPage1Permission = computed(() =>
      store.getters.hasPermission('editPage1')
    );

    return {
      hasViewPage1Permission,
      hasEditPage1Permission,
    };
  },
};
</script>

在这个组件中，我们使用 `computed` 属性来获取当前用户是否有查看页面1和编辑页面1的权限。我们使用 `useStore` 方法来获取我们之前定义的 store。

在这个组件中，我们通过使用 `v-if` 指令来判断当前用户是否有相应的权限，如果有，就显示对应的内容。

这就是如何在 Vue3 中使用 Pinia 设置前端权限的方法。