详解利用 Vue.js 实现前后端分离的RBAC角色权限管理

项目背景：物业管理后台，不同角色拥有不同权限

采用技术：Vue.js + Vuex + Element UI

实现 RBAC 权限管理需要后端接口支持，这里仅提供前端解决方案。

因代码篇幅较大，对代码进行了删减，文中 “...” 即为省略的一部分代码。

大致思路：
首先登录成功后，从后台拉取用户当前可显示的菜单和可用权限列表，分别将其存入 store 的 nav（菜单导航） 和 auth（用户可用权限） 中，在用户切换路由时，判断是否存在 auth ，如果不存在，则重新获取，判断当前访问地址 to.meta.alias 是否在用户可用权限列表中，如果不存在，则提示无权限，否则进入路由。

1. 路由与侧边菜单分离

侧边菜单相关代码 Main.vue

<template><!-- ... -->  <aside :class="collapsed?'menu-collapsed':'menu-expanded'">    <!--导航菜单-->    <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 中获取导航菜单     nav() {      return this.$store.state.nav;     }    }    // ...  }</script>