在重定向到新的 SPA 页面时在 header 中传递身份验证令牌

Question

假设这些：

       A -----------------------> B
(Sender website)          (Angular website)

我们实施了一个普通的 Angular SPA (B)，它的 index.html 和其他资源只是托管在 IIS 中，并且有一个简单的重写规则用于处理 Angular 中的路线。 Angular 中的用户需要登录，他们会获得一个 JWT 令牌，它存储在浏览器存储中。

有一个网站 (A) 想要将用户重定向到 Angular 网站，但我们也想将 JWT 令牌从 A 传递到 B，因为令牌相同，我们希望防止用户再次登录。

网站 A 可以在 post 请求 header 中发送令牌，同时重定向到 B。问题是 JS (Angular) 无法直接获取 header 参数，因为它们正在发送到 IIS。

问题：

在 IIS 中有没有一种方法，我们可以从请求中获取令牌并将其设置在 html 属性中，同时检索 index.html？那么，JS 可以检查它的 html 元素并找到令牌。
以上技巧是否正确？如果没有，请您提出您的建议好吗？

Answer 1

我对此的思考过程是使用查询参数或路由参数将用户重定向到 angular 页面。就像 secure/unsecure 一样，因为任何人都可以看到 header 值（如果您担心将 JWT 暴露给最终用户。

我会让你的登录页面接受 JWT（或者你的页面被重定向到的任何内容）

然后，在您的登录页面中，您可以从 url

const jwt = ActivatedRoute.snapshot.queryParamMap.get('jwt');

现在，您可以将该值放入 localStorage:

localStorage.setItem('jwt', jwt);

然后，在 Angular 中，只需创建一个 HttpInterceptor 从 localStorage 获取 JWT 令牌并将其应用于每个请求的 header：

const jwt = localStorage.getItem('jwt');
const request = req.clone({ withCredentials: true, headers: jwt });

您可以把这想象成您注册某些服务时他们会通过电子邮件向您发送 link 以确认您的电子邮件。您单击的那个 link 会将您带回他们的站点，并带有电子邮件确认令牌。当您使用该令牌访问该网站时，它会根据该令牌知道您是谁。

Answer 2

上面的回答是不正确的，“这就像 secure/unsecure 因为任何人都可以看到 header 值”。 Header 值在传输中使用 TLS 加密；而 URL 查询参数在请求的整个路由过程中都是可读的。如果安全是头等大事，则不要将任何可能被视为敏感的内容作为查询参数。

Answer 3

我们无法仅通过 IIS 实现这一目标，最后我们编写了一个简单的 Node.js 应用程序作为后端，当您调用它时，它会加载 Angular 个文件。

站点 A 通过 Post 请求将令牌发送到 header 中的站点 B（托管 Node.js 后端）。然后节点应用程序 returns cookies.So 中的令牌当 angular 应用程序加载时，它从 cookies 中读取令牌。

终于把Node应用程序放到IIS中了。

希望对其他人有所帮助。

Passing authentication token in header while redirecting to a new SPA page