MSAL 使用 url 中的哈希重定向

Question

我目前正在开发 angular 6 中的一个应用程序，它使用 AAD 对用户进行身份验证。在这里，我使用库 azure/msal-angular 连接到 AAD v2。我已经按照项目自述文件中的规定使用我的客户端 ID 初始化了库，我可以正常登录。

问题是：登录后，我设置了一个重定向 url 到： http://localhost:4200/account 登录后的登录页面，我希望用户在成功登录后到达该页面。我在这里指定了路线：

{ path: 'account', component: AccountDetailedComponent }

这很好，除了从 AAD 的重定向 url 导航到 http://localhost:4200/account#id_token=xxxxx 并且在我的一生中，我无法摆脱 hashbang 和 id_token.

我希望 id_token=xxxx 是这样的查询参数：

http://localhost:4200/account?id_token=xxxx

这将使我的路线匹配，但它不匹配，因此路线无效。

我的问题是：如何解决路由匹配指定的路由？

我已经阅读了路由中的匹配器，但我真的应该制作正则表达式来匹配通用重定向路由吗？我在界面和库中都没有看到任何删除这个 hashbang 的选项。

编辑

认为这是路由不匹配的原因是，在初始重定向到 /account 之后，我再次被重定向到登录页面。它会闪烁 /account#id_token=xxxx 然后再次重定向到登录页面。我在下面的回答描述了已解决的问题。

希望能帮到你。

亲切的问候克里斯

Answer 1

所以我实际上已经解决了我自己的问题。我犯的错误是从 ngOnInit() 中手动调用 msalService.loginredirect()。当重定向到微软页面时，我会登录，然后被发送回我的应用程序。这将从 ngOnInit 方法调用相同的 msalService.loginRedirect()，因此永远不会到达实际的重定向。

据我所知，处理登录的正确方法是在特定路由上应用 canActivate: [MsalGuard]，然后让守卫处理重定向到登录屏幕，当你回来时，它会重定向到没有哈希的指定路径。

我希望这能帮助那些尝试做我所做的事情的人。如果有人觉得这令人困惑，我可以详细说明我的解决方案。

亲切的问候克里斯

MSAL 使用 url 中的哈希重定向

MSAL Redirects with hash in url

azure-active-directory

msal

angular