如何优雅的实现权限管理功能？

[sybb]

今天看同事写的权限管理功能时候发现这样的一个代码

router.beforeEach(async (to: Route, from: Route, next) => {
  if (to.path === "/") {
    authCode && authCode.includes("yhgl-r") ? next("/userManagement") : next("/home");
  }
})

看到这个yhgl-r我想了很久都没想出来是什么意思，还以为是什么用户身份码。

问了同事才知道 yhgl-r 指的是 用户管理只读。

借此想请教两个问题：

1. 后台在定义模块时候大家都是怎么定义的？

比如上述代码中就是用模块名字的首字母缩写来作为模块的 code，觉得挺不灵活优雅的，目前能想到的方案是不用缩写，有咩有其他模块定义方法？

2. 前端拿到一大堆要限制的模块 code 后，有没有什么好的处理方案？

目前见到的都是 v-if/v-show 和控制路由结合来判断是不是显示某个模块，有些模块权限复杂的话就需要一大串的判断语句，代码可读性不怎么好，有没有其他更高明的方法呢？

3. 或者有没有别的更好的权限管理方案

yhgl-r、/userManagement和/home只是为了举例编造的数据

[sybb]

@KuroNekoFan 枯了

[Quarter]

@sybb 应该是这样的 因为设计到界面的具体功能，必然需要进行判断作不同的 ui 显示或者功能调用，少不了判断的，其实还是写死的各种判断逻辑在里边，所以还是在接口拦截方面可能更好入手一点

[sybb]

@Quarter 页面控制和接口拦截基本上都会做， 前端页面做了控制就避免不了代码变得很难看了， 看来这个功能注定是个 dirtywork

[px920906]

@sybb 只是举例子，具体要限制哪些实体和操作根据你实际情况。这种做法的话，前端页面元素展示与否也容易实现，比如用户列表每一行的编辑用户按钮，用 vue 的话大概就是 v-show="auth.includes(user.update)"

[KuroNekoFan]

@sybb 我自己没做过，不过如果要我做，那我应该只在前端针对页面级别进行控制，比如 a 用户只能访问哪些 routes，至于具体的 crud 操作权限控制由后端自己处理，前端给出友好提示即可
不过这种有点架构设计的决定好像不是前端说了算的🙃

[sybb]

@px920906 好嘞 感谢
@KuroNekoFan 是的 routes 控制是一部分

[rophie123]

如果不同用户登录进去显示的界面或者操作逻辑都不太一样，需不需要后端分成两个模块去单独写？实际开发起来并不单单是显不显示某个按钮那么简单吧