【vue.js】vue后台项目权限功能实现思路

常见的后台系统中，会存在不同的用户角色，如超级管理员、普通用户，这些用户角色的权限是不同的，所以可以操作或显示的模块也不一致。这里采用如下后台管理系统框架作为模板

地址：https://github.com/PanJiaChen/vue-admin-template

简单说下需求，后台菜单如下图，要求系统中存在两类用户，管理员和普通员工，管理员登录系统可见所有菜单选项，普通用户仅可见首页菜单项。

项目左侧菜单Sidebar组件代码如下，用v-for遍历当前路由实例路由配置this.$router.options.routes传递给<sidebar-item/>，进行展示，这里不做详细介绍，

<el-scrollbar wrap-class="scrollbar-wrapper">
   <el-menu
    :default-active="activeMenu"
    :collapse="isCollapse"
    :background-color="variables.menuBg"
    :text-color="variables.menuText"
    :unique-opened="false"
    :active-text-color="variables.menuActiveText"
    :collapse-transition="false"
     mode="vertical"
    >
      <sidebar-item v-for="route in routes" 
       :key="route.path" 
       :item="route" 
       :base-path="route.path" 
      />
    </el-menu>
 </el-scrollbar>

<script>
import { mapGetters } from 'vuex'
import Logo from './Logo'
import SidebarItem from './SidebarItem'

export default {
  components: { SidebarItem, Logo },
  computed: {
    ...mapGetters([
      'sidebar'
    ]),
    routes() {
      return this.$router.options.routes;
    },
  }
}

由此可知要实现菜单栏的动态展示，在路由配置文件中，就不能将项目中所有的路由配置对象写在一起&#x