start_url / index页面上的Angular 9 PWA社交登录重定向问题

Posted 2023-02-19

【中文标题】start_url / index页面上的Angular 9 PWA社交登录重定向问题

【英文标题】：Angular 9 PWA social login redirects issue on start_url / index page

【发布时间】：2021-05-07 00:45:13

【问题描述】：

我的 Angular 应用程序正在使用 s-s-r 和 PWA 的 Angular 9 上运行。它在 Heroku+ cloudflare 上运行。

当我尝试在索引页面上通过 Facebook/Google 登录时，角度会出现请求超时错误。

例子：

打开索引页，https://coursesity.com 进行社交登录 它重定向到https://coursesity.com/?token=avafafdaregasafag Angular 给出超时错误。 用户无法登录

但如果我使用其他带有 URL+前缀的页面进行社交登录，它可以正常工作。

示例：

打开https://coursesity.com/section/development 进行社交登录 它重定向到https://coursesity.com/section/development/?token=avafafdaregasafag 用户登录成功。

在实施 PWA 和 service worker 之前，它运行良好。

这可能是什么问题？尤其是索引页。

ngsw-config.json

  "index": "/index.html",
  "assetGroups": [
    
      "name": "app",
      "installMode": "prefetch",
      "updateMode": "prefetch",
      "resources": 
        "files": [
          "/favicon.ico",
          "/*.html",
          "/*.css",
          "/*.js"
        ],
        "urls": [
          "https://fonts.googleapis.com/**"
        ]
      
    , 
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": 
        "files": [
          "/assets/**",
          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
        ]
      
    ],
    "dataGroups": [
      
        "name": "api",
        "urls": ["/api/**"],
        "cacheConfig": 
          "strategy": "freshness",
          "maxSize": 20,
          "maxAge": "1h",
          "timeout": "5s"
        
      
    ]

Manifest.json

  "name": "Coursesity",
  "short_name": "Coursesity",
  "description": "https://coursesity.com",
  "theme_color": "#5e5e9a",
  "background_color": "#FFFFFF",
  "display": "standalone",
  "scope": "/?utm_source=a2hs",
  "start_url": "/?ref=pwa",
  "icons": [
    
      "src": "assets/images/favicon/logo-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    ,
    
      "src": "assets/images/favicon/logo-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    ,
    
      "src": "assets/images/favicon/logo-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    
  ]

【参考方案1】：

快速浏览一下，这似乎与在构建应用程序后更改 s-s-r index.html 有关。您可以通过 /ngsw/state 中看到的错误推断这一点（有关 Angular SW 调试 API 的更多详细信息，请参阅 here）：

Driver state: EXISTING_CLIENTS_ONLY (Degraded due to: Hash mismatch (cacheBustedFetchFromNetwork): https://coursesity.com/index.html: expected 4e46d6b5588a4b7358aa32d9240776f02de026c5, got 8c24eec826b40fd30b5c17973a851ffe2f65f4a8 (after cache busting)
Error: Hash mismatch (cacheBustedFetchFromNetwork): https://coursesity.com/index.html: expected 4e46d6b5588a4b7358aa32d9240776f02de026c5, got 8c24eec826b40fd30b5c17973a851ffe2f65f4a8 (after cache busting)
    at PrefetchAssetGroup.<anonymous> (https://coursesity.com/ngsw-worker.js:96:123)
    at Generator.next (<anonymous>)
    at fulfilled (https://coursesity.com/ngsw-worker.js:55:98))
Latest manifest hash: 59971a1ef1069cc04a945808cc5f4fc4a1e1a85b
Last update check: 3m31s602u

简而言之，软件在构建后计算所有资产（即文件）的哈希值。这些哈希存储在ngsw.json（基于ngsw-config.json 生成）。当它获取文件时，它会再次对它们进行哈希处理，并将实际哈希值与存储在ngsw.json 中的哈希值进行比较。

如果哈希不匹配，它知道它不能信任它的配置并进入降级模式（它不为新客户端提供服务）。

---

这听起来像是您设置构建应用程序的方式，并且 s-s-r 在 SW 计算其哈希并将其存储在 ngsw.json 之后最终修改了 index.html。

使用以下命令修改 index.html 后，一个简单的解决方法是重新构建 SW 清单 (ngsw.json)：

./node_modules/.bin/ngsw-config /path/to/dist/directory /path/to/ngsw-config.json

---

最后，让我说（如果您使用的是 Angular CLI）默认 PWA 和 s-s-r 设置应该可以开箱即用。如果不是这种情况，如果您能提供最小的复制品（例如我可以检查并构建以自己查看问题的 repo），我会很乐意仔细查看。

【讨论】：

我进一步调试了这个问题，发现索引页面上没有设置cookie。当我在 localhost 中运行相同的东西时，cookie 被设置。在生产中，它不起作用。这更像是 Heroku 或 cloudflare 的问题。已保存令牌：imgur.com/uckon0O 未保存令牌：imgur.com/dkYqoSb