項目背景：物業(yè)管理后臺，不同角色擁有不同權(quán)限

采用技術(shù)：Vue.js + Vuex + Element UI

實現(xiàn) RBAC 權(quán)限管理需要后端接口支持，這里僅提供前端解決方案。

因代碼篇幅較大，對代碼進(jìn)行了刪減，文中 “...” 即為省略的一部分代碼。

大致思路：
首先登錄成功后，從后臺拉取用戶當(dāng)前可顯示的菜單和可用權(quán)限列表，分別將其存入 store 的 nav（菜單導(dǎo)航） 和 auth（用戶可用權(quán)限） 中，在用戶切換路由時，判斷是否存在 auth ，如果不存在，則重新獲取，判斷當(dāng)前訪問地址 to.meta.alias 是否在用戶可用權(quán)限列表中，如果不存在，則提示無權(quán)限，否則進(jìn)入路由。

1. 路由與側(cè)邊菜單分離

側(cè)邊菜單相關(guān)代碼 Main.vue

<template><!-- ... -->  <aside :class="collapsed?'menu-collapsed':'menu-expanded'">    <!--導(dǎo)航菜單-->    <el-menu :default-active="$route.path"         class="el-menu-vertical-aliyun"          @open="handleopen"         @close="handleclose"         @select="handleselect"         :collapse="collapsed"         unique-opened router>      <template v-for="(item,index) in nav">        <!-- 二級菜單 -->        <el-submenu :index="index+''"              v-if="item.children && item.children.length > 0">          <!-- 二級菜單頂級 -->          <template slot="title">            <i :class="['icon',item.iconCls]"></i>            <span slot="title">{{item.name}}</span>          </template>          <!-- 二級菜單下級 -->          <el-menu-item-group>            <!--<span slot="title">{{item.name}}</span>-->            <!-- && child.url-->            <template v-for="child in item.children">              <!--無三級菜單-->              <el-menu-item                  :index="child.url"                  :key="child.url"                  v-if="!child.children">                {{child.name}}              </el-menu-item>              <!--有三級菜單-->              <el-submenu                  :index="child.url"                  :key="child.url"                  v-if="child.children">                <span slot="title">{{child.name}}</span>                <el-menu-item v-for="subChild in child.children"                       :index="subChild.url"                       :key="subChild.url">                  {{subChild.name}}                </el-menu-item>              </el-submenu>            </template>          </el-menu-item-group>        </el-submenu>        <!-- 一級菜單 -->        <el-menu-item v-if="!item.children"               :index="item.url">          <i :class="['icon',item.iconCls]"></i>          <span slot="title">{{item.name}}</span>        </el-menu-item>        </template>    </el-menu>  </aside><!-- ... --></template><script>  export default {    // ...    computed: {     // 從 Vuex 中獲取導(dǎo)航菜單     nav() {      return this.$store.state.nav;     }    }    // ...  }</script>