注意,在客户端做了认证不代表不需要在服务端做了。恰恰相反,我们更需要在服务端做认证,来保证资源被正确的使用。

认证可以分为两块进行讨论。

验证(Authentication)

验证旨在识别出谁是谁。

常见的验证手段是通过 JWTopen in new window。在用户登录之后,我们将用户的 token 保存在应用中,之后每次请求都将这个 token 放到请求头或者 cookie 中。

最安全的存储 token 的方法是放到应用状态中。但是一旦用户刷新页面,应用状态被重置,token 就丢失了。因此,我们需要借助于一些客户端存储技术。

将 token 保存在 localStorage 中有一定的安全风险,如果处理不当,攻击者可以通过 XSSopen in new window 等方式获取用户的 token。

将 token 保存在 cookie 中,并设置 HttpOnly 属性,会比 localStorage 更加安全。但是这种方法需要与后端团队达成一致,同时 cookie 中的信息增多也会增加网络传输的负担。

localStorage 简单,cookie 更安全。为了保证应用安全,与其争论使用哪种方式存储,不容给我们的应用增加更多的安全防护,以抵御 XSS 等安全攻击。也就是说,我们需要对 HTML 文本内容做净化处理。

这里是一个对 HTML 做净化处理的样例open in new window

处理用户数据

已经获取到的用户数据应该作为一个全局状态存储,整个应用都可以访问到这个数据。

如果使用 react-query 的话,我们可以使用 react-query-authopen in new window 这个库来保存用户数据。如果没有,那么可以借助于 context + hooks 或者什么其他第三方状态管理库。

这里是保存用户信息的样例open in new window

如果应用可以读取到用户信息,那么就认为用户已经被验证过,是合法的。

这里是使用用户信息的样例open in new window

授权(Authorization)

授权是决定用户是否有权限访问资源的过程。

基于角色的访问控制

基于角色的访问控制,简称RBAC(Role based access control)。

通常我们会先定义一些角色,不同的角色拥有不同的资源访问权限。之后,通过检查用户是否有某一个角色来判断是否有权限访问资源。

这里是一个角色定义的样例open in new window

这里是基于角色判断权限的样例open in new window

基于权限的访问控制

基于权限的访问控制,简称 PBAC(Permission based access control)。

RBAC 并不适用于所有场景。有时候有些操作只能是资源所有者才能执行。比如评论信息,只能是用户自己才能删除或者修改。通过使用 PBAC,我们可以更灵活的实现这类访问控制。

我们可以灵活的同时使用这两种访问控制方案。通常情况下我们只需要基于角色的权限控制,特殊情况下我们再使用指定权限。

这里是混合使用两种访问控制方法的样例open in new window

关注微信公众号,获取最新推送~