如何使用 angular pwa service worker 处理身份验证重定向答案

【问题标题】：how to handle authentication redirect with angular pwa service worker如何使用 angular pwa service worker 处理身份验证重定向
【发布时间】：2021-08-23 02:29:23
【问题描述】：

我有一个 Angular 9 应用程序，我刚刚使用 @angular/pwa 包将它变成了 PWA，以提高性能。打开应用程序时，它应该重定向到我们公司的认证页面。但是，启用服务人员后，我的 API 出现错误，因为用户未通过身份验证。从docs，我认为将身份验证url添加到ngsw-config.json的navigationUrls属性可以解决这个问题，但它不会重定向到登录页面。

这就是我的 ngsw-config.json 的样子：

{
  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html",
          "/manifest.webmanifest",
          "/*.css",
          "/*.js"
        ]
      }
    },
    {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**",
          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
        ]
      }
    }
  ],
  "navigationUrls": [
    "https://webaddress.net/CoreSTS/corelogin/login*"
  ],
  "navigationRequestStrategy": "freshness"
}

关于我缺少什么的任何想法？

【问题讨论】：

标签： angular redirect progressive-web-apps service-worker

【解决方案1】：

navigationUrls 只需定义哪些 url 应该返回您的 index.html 页面。理想情况下，如果您的 SPA 具有单个入口点，则需要将其设置为 ["/"] 以避免偶尔注册新的服务人员。

如果请求没有被包括assetGroups、dataGroups和navigationUrls在内的服务工作者方面之一处理，它将通过简单的获取来处理，这就是你想要的。

虽然我注意到在这种情况下 Chrome 会在 service worker 中显示一个已取消的请求并在标准上下文中重复此请求。

不清楚是什么意思，避免这种混乱我建议添加?ngsw-bypass参数以完全消除服务工作者逻辑。这也有助于 OAuth 重定向等

【讨论】：