免费咨询病情,优化网站多少钱,seo查询,优秀购物网站建设登录的接口请求的三个内容#xff1a;1. token2. 用户信息、角色信息3. 菜单信息第一种#xff1a;基于角色Role的动态路由管理 (不推荐#xff0c;但市场用的比较多)首先列出枚举每个角色对应几个路由#xff0c;然后根据用户登录的角色遍历枚举出来的角色动态注册对应的路…登录的接口请求的三个内容1. token2. 用户信息、角色信息3. 菜单信息第一种基于角色Role的动态路由管理 (不推荐但市场用的比较多)首先列出枚举每个角色对应几个路由然后根据用户登录的角色遍历枚举出来的角色动态注册对应的路由const roles {admin:[所有路由]经理:[10个路由],运营:[5个路由],前台:[2个路由]新增一个角色:[xxx] 改代码重新发布版本
}这种做法一个弊端每添加一个角色都要手动添加代码key:value。最后前端又要发布新的版本有解决方案如下这种方法大致流程如下登录登录验证通过之后后台会返回一个token给前端前端会保存在vuex和本地(防止刷新丢失登录状态)然后拿token去后台请求一个userInfo的接口获取用户信息用户名权限信息等等权限验证通过token获取用户role信息然后根据用户role算出对应应有权限信息的路由最后用router.addRotes动态挂载计算出的路由。代码的实现根据token拿到用户信息权限信息这里代码过于简单就不写了就是请求后台的数据而已。请求回来的数据保存在Vuex当中(actions发请求----mutations传数据给state,过程不书写了)//箭头函数
const getDefaultState () {return {//获取tokentoken: getToken(),//存储用户名name: ,//存储用户头像avatar: ,//服务器返回的菜单信息【根据不同的角色返回的标记信息数组里面的元素是字符串】routes: [],//角色信息roles: [],//按钮权限的信息buttons: [],}
}vuex查看数据保存成功Router中路由的拆分现在路由是全部注册好的写死的不管什么用户看的都是一样的页面。分为三类路由常量路由不管什么角色都可以看得路由任意路由路径出错的时候重定向404异步路由不同角色需要过滤选出路由根据后台的返回的角色计算出对呀的路由store/user.js中对比路由首先要在state定一个计算好的路由变量resultAsyncRoutes:[] 和一个最终合并展示路由变量resultAllRputes:[]在获取用户信息的时候异步路由和服务器返回的路由进行对比。commit要提交对比好的路由所有写一个对比路由函数。computedAsyncRoutes()函数第一个参数是异步路由第二个是服务器返回的路由。在actions外面定义一个对比路由的computedAsyncRoutes函数//定义一个函数两个数组进行对比对比出当前用户到底显示哪些异步路由
const computedAsyncRoutes (asyncRoutes, routes) {//过滤出当前用户【超级管理|普通员工】需要展示的异步路由return asyncRoutes.filter(item {//数组当中没有这个元素返回索引值-1如果有这个元素返回的索引值一定不是-1 if (routes.indexOf(item.name) ! -1) {//递归:别忘记还有2、3、4、5、6级路由if (item.children item.children.length) {item.children computedAsyncRoutes(item.children, routes);}return true;}})
}commit的时候对比好路由需要深拷贝一下不然对比后数据影响原数据打印异步路由和服务器返回的路由然后在mutations中合并路由计算出来的异步路由常量路由任意路由进行合并用router.addRotes动态挂载计算出的路由。根据计算出路由展示菜单目前为止路由都准备好了但是侧边栏展示还是常量路由侧边栏应该遍历vuex合并好的路由resultAllRputes在Sidebar组件中这样侧边栏就这根据权限动态展示了。按钮权限菜单权限不同的用户角色能操作、能观看的菜单是不同的。按钮的权限不同的用户角色有的用户的是可见按钮、当然有的用户不可见。实现方式也比较简单根据后台返回button是否有这个按钮的权限值。用v-if去判断后台返回buttons是否包含该按钮的权限没有就不显示。templatedivel-button typeprimary v-if$store.state.user.buttons.indexOf(btn.Add1)!-1添加按钮1/el-buttonel-button typeprimary v-if$store.state.user.buttons.indexOf(btn.Add2)!-1添加按钮2/el-button/div
/template第二种基于菜单Menu的动态路由管理推荐我这里是从0搭建的很多细节需要自己处理看起来比上面的方法麻烦其实不是这样的上面是使用vue-admin很多细节作者已经处理好了我这里需要自己处理也更好的理解各种细节问题。userMenus 动态展示菜单用户管理 ----商品管理----角色管理等等这些路由模块映射成一个对象然后和后端返回这个角色的菜单信息进行对比然后用Router.addRotes的API动态注册路由。大致流程Vue3TSpinia实现这里的后台和上面的返回格式不一样问题也不大。首页还是拿到token用token拿用户信息用户信息中有用户id那个用户id去后台拿菜单信息。后台返回的菜单信息然后对路由进行划分对比一下他们的路由信息然后进行路由对比对比好就动态注册路由要点击登录前就要计算好路由也就是说push到首页就要算好路由所有在login中actions进行对比但是这个逻辑比较多为了方便管理对比路由函数写在utils在utils中这里用了两个for循环因为这里明确知道两次目录要是children两层以上可以用递归在login中actions使用计算好的路由放到routes数组中然后forEach遍历用router.addRoute动态添加路由addRoute第一个参数是目标路由第二个参数就是路由信息代码上的意思就是将遍历出来的路由信息添加main的children下面目前效果可以做到点击菜单路由也可以跟着改变了但是目前有一个问题就是我注册权限路由是pinia的actions在点击登录按钮的回调进行注册的现在当我刷新的时候这些路由就访问不到了只能访问不用权限的路由为什么会这样因为刷新不会重新加载pinia的actions的登录的回调只有点击登录才会执行解决办法就是刷新让这个回调重新执行一遍。具体实现如下在actions在定一个函数函数定义好了要让他刷新执行一遍需要在main执行顺序比较重要批念必须先加载然后再动态注册权限路由最后加载router第一个页面的匹配方法现在做一个小细活就是登录完立刻重定向到第一个页面这个需要动态的不是每个角色第一个页面都是一样的在那个utils中的mapMenusToRouters函数增加两句代码然后再router里面的前置守卫使用根据path匹配menu现在点击部门管理刷新会跳转到一点页面我们要的还是留在部门管理这个路由在nav-menu组件组件中计算出defaultActive在utils写工具函数大致流程就是这样了。文章有帮助到您帮忙点个赞赞~~~
