Vue中基于角色的侧边栏动态权限控制实现咨询

Hey there! 作为Vue新手，要搞定你说的这种动态角色与权限控制其实挺清晰的，我给你拆解成几个核心步骤，一步步来实现：

首先得把角色、菜单、权限对应关系理清楚，比如可以在前端先定义基础的权限配置：

// 基础权限标识集合
const permissions = {
  profile: 'view_profile',
  purchase: 'view_purchase',
  addRole: 'manage_roles',
  setting: 'view_settings'
};

// 角色默认权限（管理员拥有全部，普通用户初始权限由管理员分配）
const defaultRoles = {
  admin: Object.values(permissions),
  user: [] 
};

统一的权限标识能让后续的判断逻辑更规整。

用户登录成功后，后端需要返回当前用户的角色和已分配的权限列表（比如普通用户可能返回['view_purchase']）。你可以把这些信息存在Pinia或Vuex中（全局状态管理，方便所有组件获取）：

// 以Pinia为例，Vuex思路类似
import { defineStore } from 'pinia';

export const useAuthStore = defineStore('auth', {
  state: () => ({
    userRole: '',
    userPermissions: []
  }),
  actions: {
    setUserAuth(role, permissions) {
      this.userRole = role;
      this.userPermissions = permissions;
    },
    logout() {
      this.userRole = '';
      this.userPermissions = [];
    }
  },
  getters: {
    // 权限判断工具方法
    hasPermission: (state) => (permission) => {
      // 管理员直接拥有全部权限
      if (state.userRole === 'admin') return true;
      // 普通用户判断权限是否在分配列表中
      return state.userPermissions.includes(permission);
    }
  }
});

先定义基础的菜单列表，再通过权限判断过滤后渲染：

<template>
  <div class="sidebar">
    <el-menu>
      <el-menu-item 
        v-for="item in menuList" 
        :key="item.path"
        v-if="authStore.hasPermission(item.permission)"
      >
        <span>{{ item.label }}</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script setup>
import { useAuthStore } from '@/stores/auth';
const authStore = useAuthStore();

// 基础菜单配置，每个菜单绑定对应的权限标识
const menuList = [
  { path: '/profile', label: 'Profile', permission: 'view_profile' },
  { path: '/purchase', label: 'Purchase', permission: 'view_purchase' },
  { path: '/add-role', label: 'Add New Role', permission: 'manage_roles' },
  { path: '/setting', label: 'Setting', permission: 'view_settings' }
];
</script>

这样管理员登录后会显示全部4个菜单，普通用户只会展示被分配权限对应的选项。

管理员需要一个页面来给普通用户分配权限，比如用复选框组选择权限，提交后更新后端用户权限数据：

<template>
  <div class="permission-assign">
    <h3>Assign Permissions to User</h3>
    <el-checkbox-group v-model="selectedPermissions">
      <el-checkbox label="view_profile">Profile</el-checkbox>
      <el-checkbox label="view_purchase">Purchase</el-checkbox>
      <el-checkbox label="view_settings">Setting</el-checkbox>
    </el-checkbox-group>
    <el-button @click="submitAssign">Submit</el-button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// 选中的权限列表
const selectedPermissions = ref([]);

// 提交分配请求
const submitAssign = async () => {
  // 调用后端接口，将选中的权限传给后端更新用户数据
  // 示例：await axios.post('/api/user/assign-permission', { userId: targetUserId, permissions: selectedPermissions.value });
  
  // 测试阶段可以临时模拟更新权限
  // const authStore = useAuthStore();
  // authStore.setUserAuth('user', selectedPermissions.value);
};
</script>

记得要限制只有管理员能访问这个页面，后面会说怎么处理。

除了侧边栏隐藏，还要防止用户直接通过URL跳转无权限页面，用Vue Router的全局前置守卫实现：

import { createRouter, createWebHistory } from 'vue-router';
import { useAuthStore } from '@/stores/auth';

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/profile', component: Profile },
    { path: '/purchase', component: Purchase },
    { path: '/add-role', component: AddRole, meta: { requiredPermission: 'manage_roles' } },
    { path: '/setting', component: Setting },
    { path: '/403', component: NoPermission }
  ]
});

// 全局路由守卫
router.beforeEach((to, from, next) => {
  const authStore = useAuthStore();
  // 路由需要权限验证时
  if (to.meta.requiredPermission) {
    if (authStore.hasPermission(to.meta.requiredPermission)) {
      next();
    } else {
      // 无权限跳转到403页面
      next('/403');
    }
  } else {
    next();
  }
});

export default router;

这样一套流程下来，就能完整实现你要的动态角色与权限控制啦，有细节问题可以随时问~

内容的提问来源于stack exchange，提问作者Rocky