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

• 資深大佬 : slime7

  获取用户的时候返回权限不就行了，在前端做一套权限控制内容，请求后端的时候再用权限验证一下

• 資深大佬 : wednesdayco

  有权限限制的接口负责鉴权……吧

• 資深大佬 : lihongjie0209

  这种东西肯定存全局啊, 不管是 vue 中的 vuex 或者是 基于浏览器的 storage, 只需要在登录的时候获取一下就好了.

• 資深大佬 : ylsc633

  权限真正的控制还是在服务端吧

  比如 一个菜单按钮! 某类用户不允许看到! 即使你前端控制了不让看!

  用户还是可以用其他方法去展示出来进行点击的!

  但是点击后! 会请求到服务端! 服务端肯定要校验权限的!

  简而言之! 前端做好权限相关的展示(比如菜单是否展示, 删除按钮是否可点等等 )就行了! 实际的操作(增删改查) 还是得服务端来校验

• 主 資深大佬 : frozenway

  要是我说我后端用的是 thinkphp 的 auth 权限认证扩展，那用户登录时怎么返回用户拥有的权限，前端该如何实现？

• 資深大佬 : shintendo

  首页获取当前用户角色 /权限，存全局，之后直接用，所有接口返回值用拦截器统一检查，无权限则提示或跳登录页
  权限检查在后端接口上做
  前端权限是做体验而不是做安全，所以覆盖常规使用场景即可

• 資深大佬 : Erroad

  做一套权限表、用户表、用户权限表；
  做一个用户权限获取接口，前端缓存起来；
  前端根据用户权限展示功能入口，后端根据用户权限进行接口鉴权

• 資深大佬 : shintendo

  @frozenway 一般总有个 getUserInfo 接口，在这里返回就行吧。前端就是加载首页（首个页面，不是 index ）时调用这个接口

• 資深大佬 : tyrealgray

  搞 JWT 不就行了吗？

• 資深大佬 : source

  一般会有一个单独的接口给出路由级别的权限控制，用来告诉前端 “能做什么”
  还会在其他接口上通过 jwt 之类的方式做权限检查，用来告诉前端 “不能做什么”

• 主 資深大佬 : frozenway

  好的，感谢各位大佬

• 資深大佬 : NotFoundEgg

  每个菜单 /按钮指定一个标识符 用 User_Menu 表关联起来（也可以中间插一层 Role 表）
  根据权限标识符接口获取当前用户全部资源的标识符
  根据标识符隐藏 /展示菜单 /按钮

• 資深大佬 : pinyue

  权限最终是落在后端控制。
  前端只控制可见性

• 資深大佬 : est

  页面初始化的时候要返回一个可用权限列表

  甚至包含页面布局配置

  。。。

  。。。。

  。。。。。。

  然后你做着做着，就发现返回的页面配置 json 高度可定制

  甚至直接返回了渲染好的页面！

  full-circle.

• 資深大佬 : GaoGeYang

  你可以参考一下 vue-element-admin 它的做法。

• 資深大佬 : zhw2590582

  可见性都是前端控制，现代流行框架会处理路由权限问题，假如细化到每个按钮的话那就麻烦一点，你说什么语言的话，那就是 js 了

• 資深大佬 : alex321

  你都前后端分离了，自然登录初始化用户信息的时候返回权限菜单，然后其他操作拉取和校验权限分配啊。

• 資深大佬 : sarices

  用户登录返回权限，前端根据权限做控制，后端根据用户做权限的控制

• 資深大佬 : aqqwiyth

  按钮级别的 点击&不可点击 / 隐藏&可见 每个按钮 /菜单之间有一个树的关联关系. 配置上资源与角色分离

• 資深大佬 : AyanamiRei

  fastadmin 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 组件，前端写代码的时候也不用特别关注这个，只需要在组件的名字做个标识就行。

• 資深大佬 : redbuck

  第一步,整个 app 启动时,拉取用户信息.

  再就看你粒度做到多细了.
  页面级,前端路由都有相应的钩子,用进入页面前的钩子检查.
  按钮级,vuex 或者 redux 全局存储用户权限,然后搞一个高阶组件包装需要鉴权的按钮.

  当然,最要紧的还是后端,每个接口都通过 jwt 或者 cookie 鉴权即可.

• 資深大佬 : MaxTan

  不用另外调 api 确认权限，请求里面带上 token 就行了
  前端路由来控制页面

• 資深大佬 : vagranth

  我的第一直觉是，用 keycloak

• 資深大佬 : Arisky

  页面权限可以用路由保护来做。react 和 vue 都有。其他权限可以根据接口获取的权限树来做。
  不过需要注意的是，前端的权限控制的只是展示。后端接口一样需要做权限控制。

• 資深大佬 : ChefIsAwesome

  老生常谈的问题。你想想如果页面一直开着，直到身份过期。这时候前台能显示的是不是都显示了，如果后端不做验证，是不是毫无意义。

• 資深大佬 : guolaopi

  别纠结可见性了。。我记的 element-admin 里面是控制按钮是否渲染，而不是是否可见

• 資深大佬 : geeksun

  在后端的 API 工程里增加 Interceptor 实现用户对访问 URL 权限的拦截，在前端实现比较鸡肋

• 資深大佬 : gengbo25hao

  vue+elementui 后端返回数据格式与 vue 路由参数格式一样，前端获取参数添加 this.$router.addRoutes(menuResolve);

• 資深大佬 : Achiii

  你可以前端是一致的，请求某个功能的时候才判断有无权限