Vue-Element-Admin 权限管理和动态菜单构建之心得

前言

Vue-Element-Admin 是一个基于 Vue.js 的后台管理系统框架，它提供了丰富的组件和开箱即用的功能，帮助开发者快速构建后台管理系统。本文将重点介绍如何在 Vue-Element-Admin 项目中实现动态路由权限管理和菜单渲染，让你轻松实现权限控制和动态菜单构建，为你的项目添加更多灵活性和安全性。

动态路由权限管理

在 Vue-Element-Admin 项目中，动态路由权限管理是通过使用 permission.js 文件来实现的。这个文件定义了系统中的所有路由权限，并根据用户角色进行权限分配。当用户登录系统后，系统会根据用户的角色获取其对应的路由权限，并动态生成路由表。

1. 创建 permission.js 文件

在 src 目录下创建一个 permission.js 文件，并按照以下格式定义路由权限：

const permission = {
  // 管理员权限
  admin: {
    // 首页
    home: {
      path: '/home',
      name: 'Home',
      component: 'Home'
    },
    // 用户管理
    user: {
      path: '/user',
      name: 'User',
      component: 'User'
    },
    // 角色管理
    role: {
      path: '/role',
      name: 'Role',
      component: 'Role'
    }
  },
  // 普通用户权限
  user: {
    // 首页
    home: {
      path: '/home',
      name: 'Home',
      component: 'Home'
    },
    // 个人中心
    profile: {
      path: '/profile',
      name: 'Profile',
      component: 'Profile'
    }
  }
};

在这个示例中，我们定义了两个用户角色：管理员和普通用户。管理员拥有对所有页面的访问权限，而普通用户只能访问首页和个人中心。

2. 在 main.js 文件中引入 permission.js 文件

在 main.js 文件中引入 permission.js 文件，并将其作为路由守卫使用，以确保只有具有相应权限的用户才能访问页面。

import Vue from 'vue'
import VueRouter from 'vue-router'
import permission from './permission'

Vue.use(VueRouter)

const router = new VueRouter({
  // 路由配置
})

// 路由守卫
router.beforeEach((to, from, next) => {
  // 获取当前用户的角色
  const role = localStorage.getItem('role')

  // 根据角色获取对应的路由权限
  const permissions = permission[role]

  // 检查用户是否具有访问当前页面的权限
  if (permissions.includes(to.name)) {
    next()
  } else {
    next({ path: '/403' })
  }
})

这样，当用户访问某个页面时，系统会首先检查用户是否具有访问该页面的权限，如果没有，则会将用户重定向到 403 页面。

动态菜单渲染

在 Vue-Element-Admin 项目中，动态菜单渲染是通过使用 menu.js 文件来实现的。这个文件定义了系统中的所有菜单项，并根据用户角色进行菜单分配。当用户登录系统后，系统会根据用户的角色获取其对应的菜单项，并动态生成菜单。

1. 创建 menu.js 文件

在 src 目录下创建一个 menu.js 文件，并按照以下格式定义菜单项：

const menu = {
  // 管理员菜单
  admin: [
    {
      path: '/home',
      name: 'Home',
      component: 'Home',
      meta: {
        title: '首页'
      }
    },
    {
      path: '/user',
      name: 'User',
      component: 'User',
      meta: {
        title: '用户管理'
      }
    },
    {
      path: '/role',
      name: 'Role',
      component: 'Role',
      meta: {
        title: '角色管理'
      }
    }
  ],
  // 普通用户菜单
  user: [
    {
      path: '/home',
      name: 'Home',
      component: 'Home',
      meta: {
        title: '首页'
      }
    },
    {
      path: '/profile',
      name: 'Profile',
      component: 'Profile',
      meta: {
        title: '个人中心'