基于 RESTful 风格的 API 前后端分离的项目如何做权限控制

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

• 请不要在回答技术问题时复制粘贴 AI 生成的内容

这是一个创建于 3154 天前的主题，其中的信息可能已经有所发展或是发生改变。

项目后端是基于 RESTful 风格的 API ，前端是基于 AngularJS 的静态页面。身份校验使用 JWT 来做，但是对于资源的控制这块儿有一些疑问。

例如前端每一个按扭或者操作都有调用对应的接口，这个对应的接口都是前端写好的。我知道这个接口调用是肯定是要在后端做权限校验的，但是不能让用户去操作了才告诉他有没有权限。也就是说在用户登录后，哪个接口有权限哪个没权限UI上就已经控制了是否显示，主要是这块儿应该是不知道如何更好的实现？

我现在能想到就是在用户登录后，把用户有权限操作的接口全部返回给前端，然后前端根据接口是否包含在列表中来控制 UI 上的按钮是否显示(AngularJS 能否实现？)。因为没有这样项目的经验，所以总觉得这样做有些别扭。是不是还有其他实现方案？

权限

接口

RESTful

AngularJS

21 条回复 • 2016-05-11 21:41:43 +08:00

lrj2u

2016-05-11 00:26:26 +08:00

我用过 shiro 做权限管理，把用户对应的角色权限打包好，登录时候发给前端。前端封装一个指令，用来控制是否显示。
需要权限控制的按钮加一个自定义的字符串，与权限列表做比较，如果有的话就显示。

页面的话也简单，我之前的项目是使用了 ngroute ，在每个页面下加了自定义的权限字符串，跳转页面之前检查用户的权限列表是否有这个字符串，有的话就显示。

immjun

2016-05-11 00:30:31 +08:00

https://jwt.io

incompatible

2016-05-11 00:52:41 +08:00 via iPhone

@lrj2u 后端难道不再加一层权限检验？如果不加的话，伪造的 http 客户端可以轻易绕开你的限制。

Perry

2016-05-11 00:58:09 +08:00 via iPhone

ng-show="Ctrl.isLoggedIn()" 类似这种？

ayaseangle

2016-05-11 01:11:06 +08:00

看 github 的 api 是把权限元数据返回给前端。。

yyfearth

2016-05-11 02:26:51 +08:00

@incompatible 当然是要前后端都要校验的啊
前端用于阻止或者显示权限
后端就是报个错

Felldeadbird

2016-05-11 08:22:17 +08:00 via iPhone

可以基于路由加请求方式进行绑定权限。

gevin

2016-05-11 08:30:34 +08:00

前后台都要有权限相关逻辑，页面上的权限逻辑由前端来实现，后台只要保证 api 只能被符合权限的用户使用即可，前端是表现，后台是双保险

murmur

2016-05-11 08:30:48 +08:00

后端权限校验随便写个拦截器就可以做了简单点的
复杂一点的比如数据绑定流程绑定这些估计啥框架都做不了必须手写代码

lrj2u

2016-05-11 09:11:50 +08:00

@incompatible 后端当然加啊，后端是用了 shiro 的注解方式，没有权限的话用 filter 返回统一的警告信息。

LukeXuan

2016-05-11 09:14:05 +08:00

提供 permission 信息在 GET /session 内 angular 先请求 /session 解析权限然后生成前端网页

cheng007

2016-05-11 09:14:09 +08:00

token=时间;授权信息;账号;等等;，服务端给 token 一次加密传给客户端。

marvinwilliam

2016-05-11 09:16:57 +08:00

登录页面单独用服务器页面来做,用户登录之后再根据权限输出页面,这样算不算

lygmqkl

2016-05-11 10:25:21 +08:00 via iPad

我谈谈我的做法，在 icrawler.yiilib.com 里所有的权限校验发生在 restful api 中，权限通过就是 200 ，权限不通过就是 403 AngularJS 只负责响应，说实话在客户端校验权限没有任何意义。

再说服务器端用的是 RBAC 每个用户对应 role ， role 对应 resource operation

最后说 cs 通信就是 accesstoken ，但是这里面依然有 token 被窃取的危险并非 100% 安全，但是在此之上已经开发了更高级的策略来应对复杂的商用场景，当然这也超过了本次讨论的范围

大概是这样，希望能抛砖引玉

lygmqkl

2016-05-11 10:32:40 +08:00

后半个问题，考虑开一个接口响应用户的权限，返回一个 mapping 然后 angularJS 保存到 rootScope 中， render 的时候调用，应该 ok 。

graetdk

2016-05-11 11:06:25 +08:00

@lygmqkl 觉得你的项目很不错啊，最近想找租房，给个邀请码我试试？

lygmqkl

2016-05-11 11:09:47 +08:00

@graetdk 推广很头疼，目前租房还没开放，只是二手房模块，如果确定现在就要邀请码可以再 at 我一下，我给你发一个。

graetdk

2016-05-11 11:14:48 +08:00

@lygmqkl 说实话，我觉得你的项目目前来看只适合有技术基础的用户理解和使用，如果想推广开，很多内容都要优化，文案，教程，操作方式等等。等租房开放了之后再给我一个邀请码哇： [email protected] 多谢

guyskk

2016-05-11 12:21:18 +08:00

权限本身也可以作为一个资源。
可以直接返回权限信息，前端获取后自己判断用户有没有权限，也可以只返回 true/false ，前端传递想要调用的接口信息，像这样`GET /permit?resource=user&action=put -> {"permit": true/false}`。

shawnwang

2016-05-11 20:37:03 +08:00

前端对需要权限控制的按钮外包一层［自定义标签］，如<button:permission/>，标签上预设一个权限 id, 在 db 中绑定了权限 id 和 role 之间的关系，通过传递权限 ID 来判断是否有权限或是否显示按钮。

dawncold

2016-05-11 21:41:43 +08:00

获取哪些权限可见的 ajax 可以改成同步的，这样就能在渲染之前确定哪些权限是可见的。