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

Posted 2023-03-10

【中文标题】在重定向到新的 SPA 页面时在标头中传递身份验证令牌

【英文标题】：Passing authentication token in header while redirecting to a new SPA page

【发布时间】：2020-06-18 16:36:27

【问题描述】：

假设这些：

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

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

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

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

问题：

在 IIS 中有没有办法，我们可以从请求中获取令牌，并在检索 index.html 时将其设置在 html 属性中？那么，JS 可以检查它的 html 元素并找到令牌。

上述技术是否正确？如果没有，你能给出你的建议吗？

【问题讨论】：

如果你想阻止用户再次登录，你必须在登录时将令牌存储在本地存储中，并在注销时清除它。令牌可以使用 localstorage.setItem() 存储并使用 localstorage.getItem 检索。即使您以某种方式使其正常工作，也使用重定向，如果有人登录站点 A 并使用另一个选项卡登录站点 B（他们将被要求再次登录），这将是一个问题

如果它们是单独的域，则不能进行 localStorage。

@mwilson，错过了，感谢您指出。将不得不使用 iframe 并将消息发布到需要本地存储的域中的虚拟页面，这似乎比下面的答案复杂。我只是觉得有多个域并从一个域重定向到另一个域，注销会有问题

这是一个更糟糕的主意。这里（或永远）绝对不需要 iframe。不不不不不不不不不。

IIS URL 出站规则可以将请求标头中的令牌移动到 html 元素。但是，出站规则仅在发件人网站向客户端返回响应时才有效。所以IIS不能满足你的要求。

【参考方案1】：

我对此的思考过程是使用查询参数或路由参数将用户重定向到角度页面。它同样安全/不安全，因为任何人都可以看到标头值（如果您担心将 JWT 暴露给最终用户。

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

所以，假设你这样做了 https://myangularsite.com/login?jwt=JWTTOKEN

然后，在您的登录页面中，您可以从 url 中获取该 JWT 令牌

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

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

localStorage.setItem('jwt', jwt);

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

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

您可以将其视为与您注册某些服务时相同的事情，他们会通过电子邮件向您发送一个链接以确认您的电子邮件。您单击的那个链接会将您带回他们的网站，并带有电子邮件确认令牌。当您使用该令牌访问该站点时，它会通过该令牌知道您是谁。

例如：http://facebook.com/confirm?token=emailconfirmtoken