本篇所讲的路由控制方案是由前端实现的，根据具体的业务做的设计，可能不具备一般性，仅供参考！
项目背景及路由初步设计
目前在做的一个项目，目标是为了解决互联网行业里面关于资金清分业务的一些痛点。虽然目前只成功对接并上线了一个第三方企业，随着产品功能的不断完善，相信后续还会有更多的第三方企业对接，以及更多的业务场景。
这就需要提前对系统的菜单权限进行规划，由于后期开发的不确定性以及人力资源有限，路由权限控制没有采用跟后端强耦合的方式实现，由前端自行配置并处理。
一开始由于意向企业业务上的强相关性，并没有规划太多的模块（主业务全都写在了src/views/main目录下），也没有对用户行为进行规划分类，路由控制方面也是根据平台标识手动配置的路由表。
const xxx = [
'/main/nopage',
'/main/checkFace',
// ...
]
缺点
最近又做了一个B端的项目，发现上面的实现方法并不是很好，原因有以下几点：
-
对接平台多的话，就会出现一堆路由配置，不优雅、不美观
-
业务上的不一致性带来扩展的不灵活
-
暂时没有想起来 : )
经过一番考量，我决定这样做（其实也是常见的方法）
改进方案
首先业务实现上需要我新建一个文件目录（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
}
👉👉以上方案写于2021-11-06
维护总结
2023-04-03
近期业务扩展，发现上面的菜单权限控制有点不合理
这种配置不直观，有点混乱！！！
还是采用json的方式分配路由， 比如：
const menus = {
[platformId]: [
"/a"，
"/b"
],
[platformId]: [
"/a"，
"/b"
],
}
这样可以更加直观的显示出来某个业务包含哪些菜单，而不是像之前那样把菜单的权限配置在路由上！
总结： 路由设计要中电考虑可读性、易维护性
我是 甜点cc，个人网站(国外站点): blog.i-xiao.space/
公众号：【看见另一种可能】
