angular - PWA 离线授权

Question

当离线重新访问应用时，在 PWA 中保持用户身份验证的最佳方式是什么。

例子..

1. 用户通过互联网连接访问网络应用。
2. 用户登录并下载所有需要的数据 (indexeddb)。
3. 用户关闭页面。
4. 用户返回页面(没有互联网)。
5. 用户已经登录..

5 是我需要建议的部分，日志需要安全，因此 cookies/localstorage 中的 token 不够好。

有什么建议吗？

Answer 1

如果您想让您的应用自动记住用户，您需要将 token 存储在某个地方。存放在localstorage应该没问题。

如果您在 ng se-configuration 中设置数据组，Angular 会存储外部请求。这是基于 URI 缓存的。我现在可以看到两个选项:

选项 1:在每个 API 响应中返回用户 ID，如果您使用的是 jwt token ，则将用户 ID 存储在 token 正文中。当您在基于该 ID 的 Angular 过滤器中收到 API 请求时。当你有网络连接时，这不会做任何事情，因为你只有用户可以看到的东西。但是当您处于离线状态时，您无法保证缓存的数据来自当前用户。如果用户 A 登录并获取数据，用户 B 登录但未获取该数据，则缓存的响应包含用户 A 而不是 B 的数据，B 不应该看到它。此选项的问题是用户 A 的响应仍存储在缓存中，因此如果用户 B 要查看服务 worker 缓存，那么他们会看到它。

选项 2:在登录或注销时手动使服务 worker 为外部 api 请求存储的数据无效。这将向您保证缓存的数据属于当前用户。选项 1 的优点是您不需要在响应中存储和检查用户的 ID，因为您知道它必须是用户的 ID。此外，您不必担心另一个用户查看 service worker 缓存并看到其他人的响应，因为当第一个用户注销或第二个用户登录时，这些响应将被记入贷方。这里的缺点是您必须手动使 Service Worker 缓存失效，因为 Angular 没有适当的机制来为您执行此操作。

选项 3:将用户 ID 添加到 URI。由于 Angular 使用 URI 作为键存储数据，因此如果您将用户 ID 添加到 URI，它将存储该用户(和其他用户)的 api 响应。这听起来可能很理想，但这意味着任何用户都可以访问 Service Worker 缓存并查看为登录到此工作站中的应用程序的每个用户缓存的 API 响应。此外，您的 API 请求 URI 不应将用户 ID 作为其中的一部分；它应该来自 token 正文或查询。您应该不惜一切代价避免使用此选项!

我会建议 1 或 2，具体取决于您是否愿意尝试使 Service Worker 缓存失效。