当前位置: 首页 > Web前端 > JavaScript

vue项目路由权限控制实现(前端控制)

时间:2023-03-27 12:57:30 JavaScript

有一系列角色权限。在给定的路由数组中,查找具有权限的项目,形成新的路由。meta.roles中的任何角色都存在于角色列表中,并且具有权限。如果父路由没有权限,子路由不应该有权限场景:有路由如:route=[{path:'/home',meta:{roles:[2,9]},children:[{元:{角色:[2]}},{元:{角色:[9]}}]},{元:{角色:[90,4]},孩子:[{元:{角色:[4]}},{meta:{roles:[90]}}]},{path:'/home',meta:{roles:[100,1]},children:[{meta:{roles:[2]}}]}]当前用户拥有的角色列表,如:rolesList=[2,9,90]根据角色列表输出最终的授权路由,上述场景输出:result=[{path:'/home',meta:{roles:[2,9]},children:[{meta:{roles:[2]}},{meta:{roles:[9]}}]},{path:'/home',meta:{roles:[90,4]},children:[{meta:{roles:[90]}}]}]实现方式一://当前路由是否有权限functionexistJurisdiction(router){if(!router.meta)returnfalselet{roles}=router.metareturnrolesList.some(item=>roles.includes(item))}//查找授权的一级路由functiongetResult(route){let_result=route.filter(item=>{let_existJurisdiction=existJurisdiction(item)//如果当前路由有权限,则在子路由中找出有权限的路由赋给子路由_existJurisdiction&&(item.children=(item.children&&getResult(item.children)))return_existJurisdiction})return_result}letresult=getResult(route)实现二:(思路同实现一,existJurisdiction函数的判断逻辑改为是否当前角色和角色权限列表有交集,有交集表示有权限)functionexistJurisdiction(router){if(!router.meta)returnfalselet{roles}=router.meta//return(roles.length+rolesList.length)!==Array.from(newSet([...roles,...rolesList])).lengthreturn(roles.length+rolesList.length)!==(newSet([...roles,...rolesList])).size}