前端根据权限设置动态路由菜单

问题

在前端开发中，我们常会遇到根据不同角色/用户所拥有的权限码不同需要分配动态路由，一般我们可以将动态路由菜单存在后端，方便数据库管理，但是有时后端之后返回给我们一个权限码数组让前端自行进行判断，下面是我提供的一种思路

解决思路

首先，我们需要在store中写入获取权限码的接口，同时将权限码保存在store中；
在路由菜单中meta设置一个属性放置对应的权限码
然后在全局路由守卫中判断，meta中的权限码是否在用户权限码数组中

扼要代码

store代码：

const state={
code:[]
}

const mutations={
SET_CODE:(state,value)=>{
state.code=value
}
}

const actions={
async getCode({commit}){
const res=await codeApi()
if(res.code!==0)return;
commit('SET_CODE',res.data)
}
}

router.js举例

{
name:'user',
path:'user',
meta:{
access:'user_manage'  //对应的权限码
}
}

全局路由守卫

router.beforeEach(async(to,from,next)=>{
const list=[]
if(!store.getters.code?.length){
list.push(store.dispatch('user/getCode'))
}
await Promise.all(list)
if(to.meta.access && !store.getters.code.includes(to.meta.access)){
return next({name:'home'});
}
})