angular - 在重定向到新的 SPA 页面时在 header 中传递身份验证 token

Question

假设这些:

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

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

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

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

问题:

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

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

Answer 1

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

我会让您的登录页面接受 JWT(或您重定向到的任何页面)

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

然后，在您的登录页面中，您可以从 url 中获取该 JWT token
const jwt = ActivatedRoute.snapshot.queryParamMap.get('jwt');
现在，您可以将该值放入 localStorage :
localStorage.setItem('jwt', jwt);
然后，在 Angular 中，只需创建一个 HttpInterceptor从 localStorage 获取 JWT token 并将其应用于每个请求的 header :

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

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

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