使用 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 状态、令牌等。然后找出您尝试获取的路径到（例如，来自 redirectUrl，片段本身的某些部分，来自 localStorage 的某些内容，在导航离开之前进行身份验证，或类似的。完成后，调用路由器，告诉它恢复：

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

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

Handling OAuth2 Implicit Redirect with Angular Routing using HashLocationStrategy

angular

oauth-2.0

hash-location-strategy