如果给公司做网站,门户网站阳光警务执法办案查询,设计方案步骤,wordpress后台界面修改此章节偏理论知识
对于小一点的项目 比如说角色都是平级的 那我们直接像之前 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 里的数据即可做到用户权限控制
