四个平台建设网站不显示图片,网络运维工程师年终总结,热门网站建设加盟平台,一个网站如何工作流程此章节偏理论知识 对于小一点的项目 比如说角色都是平级的 那我们直接像之前 vue2.x项目从0到1#xff08;二#xff09;之后台管理侧边栏#xff08;动态渲染路由以及高亮#xff09;_vue动态渲染侧边栏_关忆北_的博客-CSDN博客这样渲染就行了 但是一旦项目大了 …此章节偏理论知识   对于小一点的项目  比如说角色都是平级的  那我们直接像之前  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; }, templatediv classasidediv classlogoname v-if!isCollapse医疗机构后台管理系统/divdiv classlogoname stylefont-size: 30px v-else医/divel-scrollbar :verticaltrue styleheight: calc(100vh - 80px);margin-right: 0;overflow: hiddendiv classwrapel-menu :keyupdate unique-opened :default-activedefaultActive background-color#000D3C text-color#fffactive-text-color#fff :collapseisCollapse active-background-color#409EFFdiv v-for(item, index) in tree :keyindexel-submenu :indexitem.menuName v-ifitem.childrentemplate slottitlei classel-icon-menu/ispan v-show!isCollapse{{ item.menuName }}/span/templateel-menu-item v-for(nth, idx) in item.children :keyidx :indexnth.menuURL clickgoRouter(nth){{nth.meta.title }}/el-menu-item/el-submenuel-menu-item :indexitem.menuURL v-else clickgoRouter(item)i classel-icon-menu/ispan slottitle{{ item.menuName }}/span/el-menu-item/div/el-menu/div/el-scrollbar/div /template 上方 v-for 渲染 tree 里的数据即可做到用户权限控制