vue3后台项目权限列表

Vue 3 后台项目的权限列表可以使用以下步骤实现：

1. 创建一个包含所有权限的列表。

例如：

const permissions = [
  { id: 1, name: 'Dashboard', code: 'dashboard' },
  { id: 2, name: 'Users', code: 'users' },
  { id: 3, name: 'Roles', code: 'roles' },
  { id: 4, name: 'Settings', code: 'settings' }
];

2. 在用户登录后将其权限保存在 Vuex Store 中。

例如：

const state = {
  user: null,
  permissions: []
};

const mutations = {
  setUser(state, user) {
    state.user = user;
  },
  setPermissions(state, permissions) {
    state.permissions = permissions;
  }
};

const actions = {
  login({ commit }, credentials) {
    // 登录逻辑
    const user = { id: 1, name: 'John Doe', email: 'john.doe@example.com' };
    const userPermissions = [1, 2, 3]; // 用户的权限 ID 列表
    commit('setUser', user);
    commit('setPermissions', userPermissions);
  }
};

3. 在需要控制权限的组件中，根据用户权限显示或隐藏相关内容。

例如：

<template>
  <div>
    <h1>Dashboard</h1>
    <div v-if="hasPermission('dashboard')">...</div>
    <div v-if="hasPermission('users')">...</div>
    <div v-if="hasPermission('roles')">...</div>
    <div v-if="hasPermission('settings')">...</div>
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  computed: {
    ...mapState(['permissions']),
    hasPermission(code) {
      return this.permissions.some(p => p.code === code);
    }
  }
};
</script>

这样就可以根据用户的权限动态显示或隐藏组件中的内容了。