使用 HashLocationStrategy 通过 Angular 路由处理 OAuth2 隐式重定向

Question

我在 SPA 上启用 OAuth2，如下所示：

• 隐式授权类型是唯一支持的授权类型
• 我的 Angular 5 应用使用 HashLocationStrategy 进行路由

我无法更改这些限制中的任何一个。

当我登录到我的应用并被重定向时，来自授权端点的重定向 url 如下所示：

http://foo/#access_token=(ey...)&token_type=bearer&state=(state...)&expires_in=43199&jti=(jti...)

这符合 OAuth2 规范的预期；重定向 url 中的参数必须作为片段附加（在“#”之后）。

我遇到的问题是 Angular 正在根据其散列位置策略解释散列之后的字符。它正在尝试重定向到不存在的路径access_token=...。

我该如何解决这个问题？

Answer 1

您需要告诉路由器停止使用它的恶作剧，直到您处理完 URL。方法如下：

imports: [
  ..
  RouterModule.forRoot(routes, { initialNavigation: false }),
],
...

现在爱管闲事的路由器在页面加载时不会做任何事情。 这意味着您必须处理好它！ 去解析您的 OAuth 状态、令牌等。然后找出您尝试到达的路线（例如来自 @987654322 @，片段本身的某些部分，来自 localStorage 的某些内容，在导航离开进行身份验证之前，或类似的内容。完成后，调用路由器，告诉它恢复：

this.accessToken = this.url....
this.router.navigate('wherever-you-wanted-to-go-in-the-first-place');