PWA脱机授权

Question

在脱机时重新访问应用程序时,在PWA中对用户进行身份验证的最佳方法是什么？

例..

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

5是我需要建议的部分,日志需要是安全的,因此cookies/localstorage中的令牌不够好.

有什么建议吗？

Answer 1

如果您想让您的应用程序自动记住用户，您需要将令牌存储在某处。将其存储在本地存储中应该没问题。

如果您在 ng se 配置中设置数据组，则 Angular 会存储外部请求。这是基于 URI 进行缓存的。我现在可以看到你有两个选择：

选项 1：在每个 API 响应中返回用户 ID，如果您使用 jwt 令牌，则将用户 ID 存储在令牌正文中。当您在 Angular 过滤器中收到基于该 ID 的 API 请求时。当您有网络连接时，这不会执行任何操作，因为您只有用户可以看到的内容。但是当您离线时，您无法保证缓存的数据来自当前用户。如果用户 A 登录并获取数据，用户 B 登录但未获取该数据，则缓存的响应包含用户 A 而非 B 的数据，并且 B 不应该看到它。此选项的问题在于，用户 A 的响应仍然存储在缓存中，因此如果用户 B 要查看 Service Worker 缓存，那么他们就会看到它。

选项 2：在登录或注销时手动使 Service Worker 为外部 api 请求存储的数据失效。这将保证缓存的数据属于当前用户。与选项 1 相比，优点是您不需要在响应中存储和检查用户的 ID，因为您知道它必须是用户的。此外，您不必担心其他用户查看服务工作线程缓存并看到其他人的响应，因为当第一个用户注销或第二个用户登录时，这些响应将被计入。这里的缺点是您必须手动使 Service Worker 缓存无效，因为 Angular 没有适当的机制来为您处理此问题。

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

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