weMa路由权限控制

实现思路

路由没用使用 addRoute的函数

export const router = createRouter({
  history: createWebHistory('//'),
  routes,
})

export const routes: Array<RouteRecordRaw> = [
  mainIndexRoutes,
  ...loginRoutes,
  ...notAuthRoutes,
]

routes分为三个部分： 1.根据权限筛选过的路由 2.登录 3.登录白名单

登录白名单包括这几个页面： login,not found,not auth,home

路由的筛选，可以存储在vuex中，vuex再使用localstorage存储。

筛选条件： route meta中定义authKey数组， 然后后端返回authList. forEach循环路由判断路由是否有权限，返回true,false 怎么过滤？ 递归异步过滤路由表，返回符合用户角色权限的路由表。

function filterAsyncRouter(mainRoutesDeep: RouteRecordRaw[]) {
  const accessedRouters = mainRoutesDeep.filter(route => {
    if (hasPermission(route)) {
      if (route.children && route.children.length) {
        route.children = filterAsyncRouter(route.children)
      }
      return true
    }
    return false
  })
  return accessedRouters
}