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

[frozenway]

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

[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]

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

[chenhui7373]

之前不知道的时候觉得一定有啥奇技淫巧，后面看了 jhipster 的文档，原来原理也是前端只做 ui 显示隐藏而已，真正权限在后端控制。