路由访问权限控制

目前在做的一个项目，目标是为了解决互联网行业里面关于资金清分业务的一些痛点。虽然目前只成功对接并上线了一个第三方企业，随着产品功能的不断完善，相信后续还会有更多的第三方企业对接，以及更多的业务场景。
这就需要提前对系统的菜单权限进行规划，由于后期开发的不确定性以及人力资源有限，路由权限控制没有采用跟后端强耦合的方式实现，由前端自行配置并处理。
一开始由于意向企业业务上的强相关性，并没有规划太多的模块（主业务全都写在了src/views/main目录下），也没有对用户行为进行规划分类，路由控制方面也是根据平台标识手动配置的路由表。

const xxx = [
  '/main/nopage',
  '/main/checkFace',
  // ...
]

最近又做了一个B端的项目，发现上面的实现方法并不是很好，原因有以下几点：

1. 对接平台多的话，就会出现一堆路由配置，不优雅、不美观
2. 业务上的不一致性带来扩展的不灵活
3. 暂时没有想起来 : )

经过一番考量，我决定这样做（其实也是常见的方法）
首先业务实现上需要我新建一个文件目录（src/views/xxx，不能再往main目录下放了），在里面写路由组件。
期间我想过以对接的平台标识创建路由组件目录，进行业务上的隔离，没有做出实际尝试就被我舍弃了，原因是：以平台标识作为业务的根目录，跟原先的做法本质上是一致的，只是改进，相当于是补丁，而我要做的是寻找另一种解决办法。
linux系统一切皆文件的思想。类似的，我还是采用了老套的办法，给每一个路由菜单赋予一个访问权限的配置。
这样做，后面维护起来也简单明了（有了平台标识和用户行为的划分）

{
    path: "/test",
    name: "Test",
    meta: {
      belong: ["xxx", "xxx"] // 所属平台信息，操作行为信息...
    },
    component: () => import("@/views/test")
  },

后端同事配合规划用户平台和行为，在用户访问的时候，后端返回用户信息的同时，返回平台标识和行为标识。
同样的，在全局路由钩子里验证访问权限。

router.beforeEach((to, from, next) => {
  try {
    const { belong = [] } = to.meta
    const authInfo = ["platform", "action"]
    if (accessTokenStr) {
      // 已登录, 做点什么
      // belong <--> authInfo
      // arrayInclude(belong, authInfo)
    } else {
      next()
    }
  }catch (err) {
    console.log(err);
  }
})

/**
 * 判断数组元素的包含关系，不要求顺序一致
 * 数组中不存在重复元素
 * 用于验证路由权限
 * arrA包含arrB，返回true, 否则返回false
*/
export const arrayInclude = (arrA, arrB) => {
  let flag = true
  for (let i = 0; i < arrB.length; i++) {
    if (!arrA.includes(arrB[i])) {
      flag = false
      break
    }
  }
  return flag
}