如何正确使用JWT来实现一个SPA的安全认证？

Question

正在开发一个小型系统。打算使用SPA的方式。前端用Reactjs，后端用express加mongodb。由于以前一直是开发传统web项目，对于安全和权限管理都是通过session实现。看了网上一些资料，发现很多人对SPA建议使用基于token的认证方式，JWT是其中提到比较多的一种。

这里对于认证机制的实现有几个问题。

1. JWT应该是每次都从客户端发送过来，那么存在客户端哪里比较合适cookie，localStorge，sessonStorge？

2. 如果存在客户端，稍微有点经验的开发人员可以通过chrome的developer tools拿到token。然后放到自己的请求中发送回来，而且可以验证通过。如何避免这种情况的发生？

3. 如果客户端发送过来的JWT过期了，如何实现token的更新？如果一个用户一直在浏览我的网站，他的token是不应该过期的或者说他不应该察觉到他的token已经被更新了。可否基于这个帖子给一个更详细的解决方案。

由于本人对SPA开发有很多不清楚的地方，也许很多问题有概念性的错误，也请大家提出。谢谢。

Answer 1

不是很有经验，试着回答问题，有错误请指正。

1. 在cookie，localStorge，sessonStorge选择的话，优先后者2个，区别在于前者无法防范CSRF攻击，后者在于要不要用户意外关闭浏览器之后，重新启动还保持登录状态。

2. 举个?的话，例如你输入账号密码登录了PC QQ，然后你拿着登录过后的凭证去直接使用手机QQ(假如可能的话)，这过程也就意味着用户本来就通过了验证，要做什么操作只能随用户了。

3. 这个问题刚好找到有人在讨论 https://segmentfault.com/q/1010000002449556

Answer 2

楼主想问下这些疑问解决了么

Answer 3

公司业务前后端分离，用的 也是 JWT， 结合公司业务和我个人理解，试着解答下：

• JWT应该是每次都从客户端发送过来，那么存在客户端哪里比较合适cookie，localStorge，sessonStorge？

我们采取的是 拿到 jwt 直接放到http headers 里， 不在缓存/cookie里存储，之后的所有 ajax 请求都会带上 token :Vue.http.headers.common['Authorization'] = 'Bearer ' + token

• 如果存在客户端，稍微有点经验的开发人员可以通过chrome的developer tools拿到token。然后放到自己的请求中发送回来，而且可以验证通过。如何避免这种情况的发生？

这无法避免吧，已经能打开chrome了，说明你的机器已经被人控制了，什么事情都可以发生了。 当然 使用 jwt 一定要使用 https, 否则 你的请求被拦截，别人拿着你的token 就可以访问你所有的接口了。

• 如果客户端发送过来的JWT过期了，如何实现token的更新？如果一个用户一直在浏览我的网站，他的token是不应该过期的或者说他不应该察觉到他的token已经被更新了。可否基于这个帖子给一个更详细的解决方案。

我们的方案是过期时间七天，过期之后重新登录。