前端后台根据角色改变路由菜单

const accessRoutes = filterAsyncRoutes(asyncRoutes,roles)//asyncRoutes：整体路由，roles：角色

function filterAsyncRoutes(routes, roles) {
    const res = []
    routes.forEach(route => {
      const tmp = { ...route }
      if (hasPermission(roles, tmp)) {
        if (tmp.children) {
          tmp.children = filterAsyncRoutes(tmp.children, roles)
        }
        res.push(tmp)
      }
    })
    return res
}
// roles传入的是字符串格式,例：'admin'

function hasPermission(roles, route) {
    if (route.meta && route.meta.roles) {
      return route.meta.roles.includes(roles)
    } else {
      return false
    }
  }

//roles传入的是数组格式，例：['admin']

function hasPermission(roles, route) {
  if (route.meta && route.meta.roles) {
    return roles.some(role => route.meta.roles.includes(role))
  } else {
    return false
  }
}

把遍历得到的路由存储到vuex里，

if (hasToken) {
    if (to.path === "/login") {
      // if is logged in, redirect to the home page
      next({ path: "/" });
      NProgress.done();
    } else {
      let roles = store.getters.roles;
      let permission_routes = store.getters.permission_routes && store.getters.permission_routes.length > 0;
      if(!permission_routes) {
        const accessRoutes = filterAsyncRoutes(asyncRoutes,roles);
        store.commit('user/SET_ROUTES', accessRoutes)
        router.options.routes =store.getters.permission_routes
        router.matcher = new Router().matcher;
        router.addRoutes(router.options.routes);
        next({ ...to, replace: true })
      }else {
        next();
      }
    }
  }