在服务工作者中处理React应用程序的身份验证

Question

我有一个React应用程序渲染客户端,我通过以下方式处理身份验证:

1. 加载后,应用程序向后端发出一个AJAX请求,基本上询问用户的会话是否有效;
2. 它使用服务器的响应更新应用程序的状态;
3. 它相应地呈现"/"路由(如果会话无效则为主页,如果有效则为仪表板).

(也许在前端应用程序中有更好的解决方案来解决这个问题,如果你有想法,我会全力以赴)

这很好用,但是将服务工作者引入混合并试图将应用程序变成离线优先的渐进式Web应用程序似乎......很复杂.

一方面,如果我不缓存"我登录了吗？" 请求和应用程序处于离线状态,应用程序将始终呈现主页.另一方面,如果我确实缓存了AJAX请求,用户最终会显示一个空的仪表板,因为他们的会话已经过期,服务器将丢弃403.

有没有办法有效地处理这个问题？

Answer 1

我通过采用不同的方法解决了我的问题:我现在将状态保存在localStorage中.

这样,当用户到达应用程序时,他将看到他上次访问时的陈旧数据.与此同时,"我登录了吗？" 请求在后台触发.

• 如果它成功并返回true,则其他AJAX请求被触发并用新数据填充应用程序;
• 如果成功并返回false,则相应地更新状态并且用户重定向到主页;
• 如果请求不成功(即应用程序处于脱机状态),则应用程序会持续显示仪表板中上次会话的过时数据.我们不知道用户的会话是否仍然有效,但我们无法检索任何数据,因此无关紧要.