【Vue+Element】利用render函数实现一个递归的权限菜单

等时钟成长

已于 2022-01-20 10:53:50 修改

阅读量1.4k

点赞数 2

分类专栏：前端 vue element 文章标签： vue.js javascript 前端权限菜单

于 2022-01-19 20:27:06 首次发布

本文链接：https://blog.csdn.net/pangji0417/article/details/122588774

版权

之前是写过一个利用单文件组件name进行递归的菜单版本，这次分享一个利用render函数实现的版本，加入了meta里的权限信息，控制菜单的显示与否，供需要的同学参考。

路由数据

在meta中定义权限相关字段，有的页面不需要展示在菜单，用hiddenInMenu将其过滤；有的页面需要登录才能查看，通过isAuthRequired字段控制；有的页面登录后，需要区分指定角色才可查看，增加role字段来控制。（这里简单的使用了字符串比较像等，实际上有的页面是多角色可见，可以升级成数组，通过role.includes(currentRole)来控制）

import Layout from "@/components/layout/Layout.vue";
import Empty from "./empty.vue";

/**
 * 路由对象的meta
 * @property {boolean} isAuthRequired - 是否需要登录才可进入页面
 * @property {string|array} role - 角色验证 - 前提是 isAuthRequired === true （即已经登录）
 * @property {boolean} title - 菜单名
 * @property {boolean} hiddenInMenu - 是否展示在菜单中
 */
export const routes = [
  // 仓库管理
  {
   
    path: "/repository",
    redirect: "/repository/index",
    component: Layout,
    meta: {
   
      title: "仓库管理"
    },
    children: [
      {
   
        path: "index",
        name: "Management",
        component: Empty,
        meta: {
   
          title: "系统管理",
          isAuthRequired: true
        }
      },
      {
   
        path: "registry",
        name: "Registry",
        component: Empty,
        meta: {
   
          title: "系统注册",
          isAuthRequired: true
        }
      },
      {
   
        path: "modify",
        name: "Modify",
        component: Empty,
        meta: {
   
          title: "系统修改",
          isAuthRequired: true,
          hiddenInMenu: true
        }
      }
    ]
  },
  // 个人单页
  {
   
    path: "/profile",
    redirect: "/profile/index",
    component: Layout,
    meta: {
   
      title: "无子菜单"
    },
    children: [
      {
   
        path: "index",
        name: "User View",
        component: Empty,
        meta: {
   
          title: "升级菜单",
          isAuthRequired: true
        }
      },
      {
   
        path: "modify",
        name: "Modify",
        component: Empty,
        meta: {
   
          title: "不显示",
          isAuthRequired: