Angular PWA Service Worker场景下认证重定向失效如何解决？

你对navigationUrls配置项的作用理解存在偏差：navigationUrls的作用是指定哪些属于Angular应用内的前端路由路径，需要被Service Worker拦截并返回本地缓存的index.html，用来支持SPA的前端路由刷新逻辑。你将外部认证域名的URL加入该配置后，跳转到认证页的导航请求会被Service Worker拦截，直接返回你应用的本地首页，自然无法触发外部认证跳转。

• 第一步：修正navigationUrls配置
  移除你加入的外部认证URL，恢复默认配置即可：

"navigationUrls": [
  "/**",
  "!/**/*.*",
  "!/**/__"
]

默认规则会匹配所有非静态资源、非特殊路径的应用内导航请求，不会拦截跳转到外部域名的请求。

• 第二步：新增dataGroups配置处理鉴权相关请求
  你当前的配置没有对API请求的缓存策略做声明，未认证错误大概率是Service Worker返回了之前缓存的未授权响应。新增如下配置，让所有鉴权相关的API、认证服务相关的请求完全不缓存，优先走网络：

"dataGroups": [
  {
    "name": "auth-requests",
    "urls": [
      "/api/**",
      "https://webaddress.net/CoreSTS/**"
    ],
    "cacheConfig": {
      "maxSize": 0,
      "maxAge": "0u",
      "strategy": "freshness"
    }
  }
]

其中maxSize: 0表示完全不缓存该组的请求，所有请求都会直接发送到服务端获取最新响应。

• 第三步：为外部跳转请求加跳过Service Worker的标记
  如果调整上述配置后仍然存在跳转拦截问题，可以在触发认证跳转的URL后添加ngsw-bypass参数，例如https://webaddress.net/CoreSTS/corelogin/login?ngsw-bypass=true，Angular Service Worker会直接放行带有该标记的请求，不会做拦截处理。

• 额外验证点
  你配置的navigationRequestStrategy: "freshness"仅对应用内的导航请求生效，不会作用于API请求，不需要修改该配置。

内容的提问来源于stack exchange，提问作者roca323