MERN应用中React Redux与Cookie存储用户Token的最佳实践咨询

Redux存Access Token可行吗？ #

当然可行，但有个绕不开的问题：Redux状态是存在内存里的，页面一刷新、浏览器一关，Token就没了，用户得重新登录。要是想解决这个问题，很多人会把Token同步到localStorage或者sessionStorage，但这俩地方不安全——XSS脚本能直接读走里面的内容，等于把Token拱手送给攻击者。
所以Redux存Token适合那种短会话、内部自用的小系统，或者作为临时存储配合Refresh Token机制用。

配Refresh Token时的最佳实践：分层存储 #

做Refresh Token的话，业界基本都是分层存，兼顾安全和用户体验：

• Access Token放Redux（内存）：Access Token有效期设短点，比如15到30分钟。存在内存里，即使被XSS盯上，也没法直接拿到（除非攻击者能dump内存，这种情况极少）。就算页面刷新丢了，用Refresh Token重新拿一个就行，不用用户再登录。
• Refresh Token放HttpOnly Cookie：
  • 一定要开HttpOnly属性：前端JS根本读不到这个Cookie，彻底堵死XSS窃取的路子。
  • 加上Secure属性：只有HTTPS连接才会传这个Cookie，防止明文被截获。
  • 设SameSite=Strict或者Lax：限制Cookie只能在同站请求里发送，防CSRF攻击。
  • 后端这边，Refresh Token要和用户ID绑定，有效期设长点（比如7天），而且每次用旧Refresh Token换新的Access Token时，要把旧的Refresh Token作废，避免被重复利用。

额外要注意的点 #

• 前端要监听Access Token的过期时间，快到期或者接口返回401时，自动调用后端的刷新接口，拿新的Access Token更新Redux状态。
• 后端校验Token时，要查签名对不对、有没有过期、用户权限匹配不匹配，别漏了。
• Access Token里别塞敏感信息，哪怕存在内存，也有极小概率泄露。

内容的提问来源于stack exchange，提问作者Alexandro Pineda