权限控制菜单、路由

...
export default class App {
  ...
 
  // 根据权限筛选
  filterByRoles = <T extends { sub?: T[], roles?: string[] }> (arr: T[], roles: string[]) => {
    return arr.reduce((newArr, item) => {
      // 如果还未获取到 roles，不进行接下来的查找，直接过滤掉
      if (!roles) return newArr

      // 如果 item 设置了 roles，但是没有一项命中 roles，也过滤掉
      if (item.roles && item.roles.every(role => !roles.includes(role))) return newArr

      // 如果 item 有不为空的 sub 字段，继续筛选子菜单
      const newItem = item.sub && item.sub.length
        ? { ...item, sub: this.filterByRoles(item.sub, roles) }
        : item
      // 如果原来有 children，筛选完后变成空的了，过滤掉，否则保留
      return newItem.sub && !newItem.sub.length ? newArr : newArr.concat(newItem)
    }, [])
  }
  
  const authRoutes = this.filterByRoles(routes, this.state.session.roles)
  const authMenus = this.filterByRoles(menus, this.state.session.roles)

  ...
 }