具有外部登录功能的 Polymer 2
Polymer 2 with external login
我按照 Polymer 2 教程创建了几个测试应用程序，其中 index.html 加载应用程序 shell 组件，然后根据需要延迟加载所有子组件。
现在，在我的实际应用程序中，我有一个 SPA 和一个 Rest 后端，我需要用户首先使用外部令牌服务提供商 (TSP) 登录才能访问大部分后端接口。后端知道 TSP，每当进行需要经过身份验证的用户的 REST 调用时，后端默认会将客户端重定向到 TSP 的登录页面（如果尚未登录）。然后登录页面将重定向回我的应用程序。
问题是我当前的 Polymer 应用程序 shell 已经加载了太多东西，需要相当长的时间才能加载，然后才发现用户尚未登录，需要重定向到茶匙。
处理这种外部登录情况的一般方法是什么？
我应该有一个简化的开始页面，除了重定向到登录页面之外什么都不做吗？当用户从登录重定向回来时，我将如何加载实际的应用程序？所有这些如何与 service worker 之类的东西结合在一起？
更新
关于环境的更多信息：
客户端： Polymer 2 with the oidc-client.js（OpenID Connect (OIDC) 和 OAuth2 协议支持基于浏览器的 JavaScript 应用程序）
服务器端： ASP.NET Core 2.0，带有为 Polymer 服务的静态文件和用于访问数据库的 REST 接口。例如 运行 在端口 5000 上。
令牌服务提供商： 我的定制服务，构建于 IdentityServer4（ASP.NET Core 的 OpenID Connect 和 OAuth 2.0 框架）。例如 运行 在端口 5001 上。
oidc-client 是 Polymer 应用程序中可以检测用户是否登录的组件。如果没有，它会重定向到 IdentityServer 以获取登录掩码，成功登录后，用户将被重定向到 Polymer 应用程序然后可以为给定用户加载所有可访问的contents/components。
经过多次测试，我认为我找到了解决方案：
这个想法只是分两个阶段加载应用程序。
第 1 阶段：index.html 除了用于外部身份验证的 oidc-client.js 和元信息、favicon 和主屏幕图标之外什么都不包含包含在默认的 Polymer index.html 中。也许是一个小的等待动画，但没有视觉元素、Web 组件的东西，没有 Polymer！这应该尽可能快地加载并且只检查身份验证状态。如果用户未通过身份验证，它将被重定向到外部登录页面。如果它已经通过身份验证，它将被重定向到阶段 2。
第 2 阶段：start.html，以前是 Polymer 默认值 index.html。我放出了网站图标和主屏幕的东西，因为它们现在处于第 1 阶段。此文件加载 Web 组件应用程序 shell。如果应用程序中的 REST 调用导致 401（未授权），则必须检查用户是否未通过身份验证或根本没有权限。在前一种情况下，用户被重定向到阶段 1。为此，实际应用程序还需要 oidc-client.js!
我按照 Polymer 2 教程创建了几个测试应用程序，其中 index.html 加载应用程序 shell 组件，然后根据需要延迟加载所有子组件。
现在，在我的实际应用程序中，我有一个 SPA 和一个 Rest 后端，我需要用户首先使用外部令牌服务提供商 (TSP) 登录才能访问大部分后端接口。后端知道 TSP，每当进行需要经过身份验证的用户的 REST 调用时，后端默认会将客户端重定向到 TSP 的登录页面（如果尚未登录）。然后登录页面将重定向回我的应用程序。
问题是我当前的 Polymer 应用程序 shell 已经加载了太多东西，需要相当长的时间才能加载，然后才发现用户尚未登录，需要重定向到茶匙。
处理这种外部登录情况的一般方法是什么？ 我应该有一个简化的开始页面，除了重定向到登录页面之外什么都不做吗？当用户从登录重定向回来时，我将如何加载实际的应用程序？所有这些如何与 service worker 之类的东西结合在一起？
更新
关于环境的更多信息：
客户端： Polymer 2 with the oidc-client.js（OpenID Connect (OIDC) 和 OAuth2 协议支持基于浏览器的 JavaScript 应用程序）
服务器端： ASP.NET Core 2.0，带有为 Polymer 服务的静态文件和用于访问数据库的 REST 接口。例如 运行 在端口 5000 上。
令牌服务提供商： 我的定制服务，构建于 IdentityServer4（ASP.NET Core 的 OpenID Connect 和 OAuth 2.0 框架）。例如 运行 在端口 5001 上。
oidc-client 是 Polymer 应用程序中可以检测用户是否登录的组件。如果没有，它会重定向到 IdentityServer 以获取登录掩码，成功登录后，用户将被重定向到 Polymer 应用程序然后可以为给定用户加载所有可访问的contents/components。
经过多次测试，我认为我找到了解决方案：
这个想法只是分两个阶段加载应用程序。
第 1 阶段：index.html 除了用于外部身份验证的 oidc-client.js 和元信息、favicon 和主屏幕图标之外什么都不包含包含在默认的 Polymer index.html 中。也许是一个小的等待动画，但没有视觉元素、Web 组件的东西，没有 Polymer！这应该尽可能快地加载并且只检查身份验证状态。如果用户未通过身份验证，它将被重定向到外部登录页面。如果它已经通过身份验证，它将被重定向到阶段 2。
第 2 阶段：start.html，以前是 Polymer 默认值 index.html。我放出了网站图标和主屏幕的东西，因为它们现在处于第 1 阶段。此文件加载 Web 组件应用程序 shell。如果应用程序中的 REST 调用导致 401（未授权），则必须检查用户是否未通过身份验证或根本没有权限。在前一种情况下，用户被重定向到阶段 1。为此，实际应用程序还需要 oidc-client.js!