angular - 在重定向到新的 SPA 页面时在标头中传递身份验证令牌
问题描述
假设这些:
A -----------------------> B
(Sender website) (Angular website)
我们实现了一个普通的 Angular SPA (B),它的 index.html 和其他资源简单地托管在 IIS 中,并且有一个简单的重写规则来处理 Angular 中的路由。Angular 中的用户需要登录,他们会获得一个 JWT 令牌,并将其存储在浏览器存储中。
有一个网站(A)想要将用户重定向到 Angular 网站,但我们也想将 JWT 令牌从 A 传递到 B,因为令牌是相同的,我们希望阻止用户再次登录。
网站 A 可以在重定向到 B 时在post 请求标头中发送令牌。问题是 JS (Angular) 无法直接获取标头参数,因为它们正在发送到 IIS。
问题:
在 IIS 中有没有办法,我们可以从请求中获取令牌并在检索 index.html 时将其设置为 html 属性?因此,JS 可以检查它的 html 元素并找到令牌。
上述技术正确吗?如果没有,你能给出你的建议吗?
解决方案
我对此的思考过程是使用查询参数或路由参数将用户重定向到角度页面。它同样安全/不安全,因为任何人都可以看到标头值(如果您担心将 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
推荐阅读
- angular - [ng update]:错误 - 无法从工作区根目录解析“@angular-devkit/schematics”包
- reactjs - React-csv 在 react-bootstrap 下拉列表中不起作用
- angular - Angular Reactive forms - 控件的默认值不起作用
- visual-studio - Visual Studio 插件不显示任何视觉数据
- r - 在ggplot循环中制作条形图ggplot
- python - 数据帧逆整形内存
- r - 从地址字符串中提取城市名称
- python - 在 PyQt 文本浏览器中显示数据框
- html - 使用 CSS 的垂直滚动 - 背景颜色不起作用
- excel - 使用 pandas 为现有 excel 文件设置固定列宽的直接方法