Angular - 如何从重定向 url 中获取查询参数答案

【问题标题】：Angular - How to grab query params from redirect urlAngular - 如何从重定向 url 中获取查询参数
【发布时间】：2021-11-09 20:05:34
【问题描述】：

我有一个 Angular 应用程序，我正在尝试使用 AWS Cognito 实施 OAuth 流程。

在使用 Cognito UI 登录用户后，我被重定向到我的 Angular 应用程序，并且重定向 URL 包含我需要获取的令牌。重定向 URL 如下所示：http://localhost/redirect?code=123。

但是，Angular 路由器没有按预期获取此重定向 url。从添加查询参数的那一刻起，下面的路由就不起作用了。

 {
    path:'redirect', // does not work!
    pathMatch: 'prefix',
    component: RedirectComponent
  }

我尝试过使用 URL 匹配并重定向到不同的组件，但仍然没有成功。

我觉得很奇怪，当从第三方 URL 重定向时，Angular 没有办法保存查询参数，所以我认为我一定做错了什么。

非常感谢任何帮助！提前致谢！

编辑：

经过一些测试，我认为 Angular 在幕后做了一些奇怪的事情。

显然，我的路线定义没有任何问题。这是 Angular 不喜欢的“代码”查询参数（我知道这听起来很疯狂！）

例如：

http://localhost:4200/redirect?token=123456789 - 有效！

http://localhost:4200/redirect?cod=123456789 - 有效！

http://localhost:4200/redirect?codee=123456789 - 有效！

http://localhost:4200/redirect?code=123456789 - 炸了！未被路由处理程序拾取

“code”查询参数不受我控制（来自 AWS），我无法更改它。有什么想法吗？

谢谢！

编辑 2：

已修复！见下文

【问题讨论】：

pathMatch: 'prefix' 是做什么的？删除它有帮助吗？
你有没有尝试做类似的事情：this.router.events.subscribe((event: Event) => console.log(event)); ?也许你没有在活动中挑选它。
你有其他路线干扰这个吗？也许您需要更改路线的顺序？
@danday74 感谢您的评论 :)。 “前缀”是路径匹配意味着“如果 'redirect' 是 URL 的一部分，则匹配此路由。我已删除它并没有任何区别。检查我的最新编辑，我认为我已经取得了一些进展（即使我不知道如何解决它！）
@millenion 我已经尝试过了，但我没有看到任何明显的东西。重定向 url 被我的“catch all”路由获取，并将我踢回登录页面。检查我上次的编辑，我认为我取得了一些进展

【解决方案1】：

您可以通过ActivatedRoute获取查询参数。

您将在 app-routing.module.ts

中创建一个路径

      { path: 'user/profile/:user_id', component: UserprofileComponent},

然后在Userprofile.component.ts

中获取user_id

constructor(private _Activatedroute: ActivatedRoute) {
    let user_id = this._Activatedroute.snapshot.params['user_id'];
  }

【讨论】：

您好，感谢您回复我！我认为这是一个不同的问题。您提出的解决方案适用于 URL 段，但我遇到的问题是查询参数（localhost:4200/redirect?code=12345678 之类的东西，而不是 localhost:4200/redirect/user/something）
然后可以使用 queryParams 代替快照。
请看这个链接angularjswiki.com/angular/get-query-parameters-in-angular
正确，现在可以了！我不得不删除我已安装的 AWS 特定软件包之一，不知何故它导致角度路由器以一种奇怪的方式运行。您的回答帮助我找到了问题，非常感谢！

【解决方案2】：

我想我终于明白了。

我安装了aws-amplify 包，这导致了上面 GIF 中描述的行为。

一旦我删除了包，我就可以按预期重定向到localhost/redirect?code=123。

【讨论】：