前端路由访问权限控制方案

本篇所讲的路由控制方案是由前端实现的，根据具体的业务做的设计，可能不具备一般性，仅供参考！

项目背景及路由初步设计

目前在做的一个项目，目标是为了解决互联网行业里面关于资金清分业务的一些痛点。虽然目前只成功对接并上线了一个第三方企业，随着产品功能的不断完善，相信后续还会有更多的第三方企业对接，以及更多的业务场景。

这就需要提前对系统的菜单权限进行规划，由于后期开发的不确定性以及人力资源有限，路由权限控制没有采用跟后端强耦合的方式实现，由前端自行配置并处理。

一开始由于意向企业业务上的强相关性，并没有规划太多的模块（主业务全都写在了src/views/main目录下），也没有对用户行为进行规划分类，路由控制方面也是根据平台标识手动配置的路由表。

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

]

缺点

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

1. 
   
2. 
   

   对接平台多的话，就会出现一堆路由配置，不优雅、不美观

   
   
   
3. 
   

   业务上的不一致性带来扩展的不灵活

   
   
   
4. 
   

   暂时没有想起来 : )

   
   
   

经过一番考量，我决定这样做（其实也是常见的方法）

改进方案

首先业务实现上需要我新建一个文件目录（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/

公众号