前后端分离的项目，如何前端界面如何实现权限控制？

[frozenway]

以前 php 和 html 混合的代码，可以通过 php 权限控制函数来实现，但是前后端分离后，前端只通过 api 接口来获取数据，想来想去，每个页面几个功能，每个都调用一次 api 来确认一下是否有权限，服务器会不会扛不住？大家现在是怎样的思路？

[OHyn]

在路由的全局守卫里面做相关处理，动态创建权限相关的路由，参考 vue-element-admin

[cloudfstrife]

参考 RBAC 模型，需要对 RBAC 模型进行扩展。

[lbw]

https://github.com/lbwa/v-access/blob/master/README.CN.md 这是自己封装的一个基于 vue 和 vue-router 的权限库，可以试用一下

[jss]

后端必须的权限验证+前端按钮级指令控制

[Juszoe]

我也有这个问题，看了这贴清爽多了

[admin7785]

小白一个，上个项目做的就是权限模块。

后端表里面是各种权限对应关系（用户-角色-功能-api ），根据 user 查询对应关系，没的话就没有权限～

前端调接口判断是否隐藏页面

[Sendya]

vue 的。https://pro.loacg.com/docs/authority-management

[darknoll]

这是个好问题

[whevether]

1: 菜单的数据由后端返回给前端。前端根据后端返回的权限菜单去显示。
2: 控制权限路由和菜单路由的访问，通过后台返回的权限数据去匹配前端路由中额外定义的 meta 数据或自定义数据中的权限数据去控制
3: 控制接口权限。每个接口约定书写规范。例如添加就 user/add,后台添加权限在中间件中拦截请求 url 地址去匹配 rbac 中的用户权限例如 a 用户是 user.add 权限，b 用户角色没有那么就没有就能控制接口权限了。
4. 按钮级别权限。通过后端返回的权限数据在前端封装为一个指令集。通过指令去控制在指令内写逻辑. 例如 v-permission="user.add"

[whevether]

@tyrealgray 你 jwt 只是验证授权接口。你怎么控制不同角色的不同权限。还有按钮，如果我新增了一个角色。那不是又要在 jwt 授权上加上？

[TimPeake]

肯定是要后端控制得。前端只是辅助隐藏菜单 /控制路由权限

[hsk9044]

不用太担心服务器的承载量, 既然你的要请求业务接口, 肯定会有资源消耗的, 在请求内加一个权限控制的判断这个本身也不会对性能有什么影响. 再说了可以将用户的权限在登录的时候入一下缓存

[alertZ]

这个我倒是做过。对于功能性按钮的话，分为前端后端两次校验，在用户点击按钮的时候，给出提示，若用户绕过前端校验，后端还可以根据用户传回的身份进行二次判断。
对于界面菜单的话，可以做一个菜单权限的东西，在用户登录的时候，让后端根据用户身份级别返回响应的菜单回来，也就是你需要把你的菜单做出动态的。

[wanguorui123]

返回权限列表，通过权限点隐藏对应的模块和按钮

[xmge]

前后端同时控制啊。

前段控制不显示

后端控制不可调用

[couashi]

每次都走网关鉴权

[pangleon]

前端肯定要鉴权但是控制不住，后端是一定一定要卡死的

[netnr]

后台控制，也方便更新权限，根据登录用户实现同接口不同的数据

[wangyzj]

要维护一个权限表
里面配置用户能访问的 api 和能访问的界面元素
前端访问的时候对路由做劫持然后访问一个用户权限 api 来判断本页面权限和对应元素的显示状态
参考 vue-element-admin

[Sapp]

如果你想做到路由控制那很简单，路由钩子就能做，如果要通过模块就麻烦一些，我是用 babel 做的，大概就是需要判断权限的模块给模块的名字加个前缀（我是 React ），然后 babel 处理这些模块，收集一下这个组件调用的接口，统一给套个鉴权的包装组件，这样运行的时候这个鉴权组件会通过后端发过来的权限表查找是不是每个接口都满足，有一个不满足的就不给显示，满足就返回对应的 UI 组件，前端写代码的时候也不用特别关注这个，只需要在组件的名字做个标识就行。