Vue Element Admin 侧边栏动态渲染：根据用户角色或权限控制菜单

在 Vue Element Admin 中，侧边栏可以通过动态渲染来实现根据用户角色或权限进行显示不同的菜单项。以下是实现侧边栏动态渲染的一般步骤：

1. 配置菜单数据

在src/router/index.js文件中配置菜单数据，可以根据用户角色或权限设置不同的菜单项。例如：

export const constantRoutes = [
  {
    path: '/dashboard',
    component: Layout,
    redirect: '/dashboard/index',
    children: [
      {
        path: 'index',
        name: 'Dashboard',
        component: () => import('@/views/dashboard/index'),
        meta: { title: 'Dashboard', icon: 'dashboard' }
      }
    ]
  },
  // 其他菜单项...
]

2. 添加动态渲染逻辑

在src/layout/components/Sidebar/index.vue文件中，根据用户的角色或权限来动态渲染菜单项。可以使用v-if或v-for指令根据条件判断来渲染菜单项。例如：

<template>
  <el-menu
    :default-active="activeMenu"
    mode="vertical"
    :collapse="sidebar.collapse"
    unique-opened
    :collapse-transition="false"
  >
    <template v-for="route in sidebar.routes">
      <template v-if="route.meta && route.meta.roles.includes(user.role)">
        <sidebar-item :route="route" :key="route.path"></sidebar-item>
      </template>
    </template>
  </el-menu>
</template>

3. 获取用户角色或权限信息

在登录成功后，获取用户的角色或权限信息，并将其保存在 Vuex 的状态管理中。

4. 更新侧边栏数据

根据用户的角色或权限信息，在src/layout/components/Sidebar/index.vue的created钩子函数中更新侧边栏的数据。例如：

created() {
  this.updateSidebarRoutes()
},
methods: {
updateSidebarRoutes() {
const userRole = this.$store.state.user.role
this.sidebar.routes = constantRoutes.filter(route => {
return route.meta && route.meta.roles.includes(userRole)
})
}
}

这样就可以根据用户的角色或权限来动态渲染侧边栏的菜单项了。请根据实际需求进行相应的修改和调整。