在 React App 的 Service Worker 中处理身份验证
Handle authentication in a Service Worker for a React App
我有一个 React 应用渲染客户端，我在其中通过以下方式处理身份验证：
- 加载后，应用程序向后端发出 AJAX 请求，基本上询问用户的会话是否有效；
- 它使用服务器的响应更新应用程序的状态；
- 它相应地呈现“/”路由（如果会话无效则为主页，如果有效则为仪表板）。
（也许在前端应用程序中有更好的解决方案来处理这个问题，如果你有想法我会洗耳恭听）
这工作得很好，但是将 Service Workers 引入组合并尝试将应用程序变成离线优先的渐进式 Web 应用程序似乎......很复杂。
一方面，如果我不缓存 "Am I logged in ?" 请求并且应用程序处于离线状态，应用程序将始终呈现主页。
另一方面，如果我确实缓存 AJAX 请求，用户最终将看到一个空的仪表板，因为他们的会话将过期并且服务器将抛出 403。
有没有办法有效地处理这个问题？
一种方法是在后端 api 添加 /verifyToken（假设您使用某种令牌来验证会话）以检查令牌是否有效。
所以你缓存了你的会话令牌。如果应用程序处于离线状态，它会显示仪表板。
如果应用程序在线，您向 /verifyToken 发出请求以检查会话是否仍然有效。如果是，那么你继续仪表板。如果不是，您将他们重定向回主页（或登录页面）。
编辑：
当您的应用程序在线时，您可以从技术上向任何授权路由发出请求并检查响应是否为 403（以防您无法修改后端）。如果是，那么您可以将它们发回登录页面。
我通过采用不同的方法解决了我的问题：我现在将状态保存在 localStorage 中。
这样，当用户到达应用程序时，他会看到上次访问时的陈旧数据。同时，在后台触发了一个 "Am I logged in?" 请求。
- 如果成功并且 returns
true，其他 AJAX 请求将被触发并用新数据填充应用程序；
- 如果成功并且 returns
false，状态将相应更新，用户将重定向到主页；
- 如果请求不成功（即应用程序处于离线状态），应用程序会继续在仪表板中显示上次会话的陈旧数据。我们不知道用户的会话是否仍然有效，但我们无法检索任何数据，所以这无关紧要。
我有一个 React 应用渲染客户端，我在其中通过以下方式处理身份验证：
- 加载后，应用程序向后端发出 AJAX 请求，基本上询问用户的会话是否有效；
- 它使用服务器的响应更新应用程序的状态；
- 它相应地呈现“/”路由（如果会话无效则为主页，如果有效则为仪表板）。
（也许在前端应用程序中有更好的解决方案来处理这个问题，如果你有想法我会洗耳恭听）
这工作得很好，但是将 Service Workers 引入组合并尝试将应用程序变成离线优先的渐进式 Web 应用程序似乎......很复杂。
一方面，如果我不缓存 "Am I logged in ?" 请求并且应用程序处于离线状态，应用程序将始终呈现主页。 另一方面，如果我确实缓存 AJAX 请求，用户最终将看到一个空的仪表板，因为他们的会话将过期并且服务器将抛出 403。
有没有办法有效地处理这个问题？
一种方法是在后端 api 添加 /verifyToken（假设您使用某种令牌来验证会话）以检查令牌是否有效。
所以你缓存了你的会话令牌。如果应用程序处于离线状态，它会显示仪表板。
如果应用程序在线，您向 /verifyToken 发出请求以检查会话是否仍然有效。如果是，那么你继续仪表板。如果不是，您将他们重定向回主页（或登录页面）。
编辑： 当您的应用程序在线时，您可以从技术上向任何授权路由发出请求并检查响应是否为 403（以防您无法修改后端）。如果是，那么您可以将它们发回登录页面。
我通过采用不同的方法解决了我的问题：我现在将状态保存在 localStorage 中。
这样，当用户到达应用程序时，他会看到上次访问时的陈旧数据。同时，在后台触发了一个 "Am I logged in?" 请求。
- 如果成功并且 returns
true，其他 AJAX 请求将被触发并用新数据填充应用程序； - 如果成功并且 returns
false，状态将相应更新，用户将重定向到主页； - 如果请求不成功（即应用程序处于离线状态），应用程序会继续在仪表板中显示上次会话的陈旧数据。我们不知道用户的会话是否仍然有效，但我们无法检索任何数据，所以这无关紧要。