此章节偏理论知识  

对于小一点的项目  比如说角色都是平级的  那我们直接像之前  vue2.x项目从0到1（二）之后台管理侧边栏（动态渲染路由以及高亮）_vue动态渲染侧边栏_关忆北_的博客-CSDN博客这样渲染就行了   但是一旦项目大了   就比如：有管理或者是经理  员工这种  有职级层次划分的项目就不好这么渲染了   因为前端做这种权限判断的话 要写大量的  v-if  而请求后端接口返回路由表的话  明显就方便很多

我们从项目登录页进来  肯定要调取登录接口吧  在这里我们获取到用户的  token  以及用户信息 userInfo 我们可以将这些东西储存到  vuex 里或者是 localStorage  里  两个都存也行  看个人习惯  然后每次请求的时候要把  token  添加到请求头里一起携带传过去  这个时候后端就是根据  token  知道是哪个用户在请求数据  从而返回相对应的路由列表  

 

稍微大点的项目  现在用的基本都是框架  比如：若依，他们都有那种  系统管理  用户管理 去配置这些配置项  配置好后  后端才能返还给你  配置好后在侧边栏文件里写上

created() {// 获取侧边栏的接口menuTree().then(({data}) => {this.tree = data.tree})// 高亮为当前路由所在this.defaultActive = this.$route.name;
},

<template><div class="aside"><div class="logoname" v-if="!isCollapse">医疗机构后台管理系统</div><div class="logoname" style="font-size: 30px" v-else>医</div><el-scrollbar :vertical="true" style="height: calc(100vh - 80px);margin-right: 0;overflow: hidden"><div class="wrap"><el-menu :key="update" unique-opened :default-active="defaultActive" background-color="#000D3C" text-color="#fff"active-text-color="#fff" :collapse="isCollapse" active-background-color="#409EFF"><div v-for="(item, index) in tree" :key="index"><el-submenu :index="item.menuName" v-if="item.children"><template slot="title"><i class="el-icon-menu"></i><span v-show="!isCollapse">{{ item.menuName }}</span></template><el-menu-item v-for="(nth, idx) in item.children" :key="idx" :index="nth.menuURL" @click="goRouter(nth)">{{nth.meta.title }}</el-menu-item></el-submenu><el-menu-item :index="item.menuURL" v-else @click="goRouter(item)"><i class="el-icon-menu"></i><span slot="title">{{ item.menuName }}</span></el-menu-item></div></el-menu></div></el-scrollbar></div>
</template>

上方 v-for 渲染 tree 里的数据即可做到用户权限控制