从重定向角度 5 中获取查询参数

Posted 2023-03-09

【中文标题】从重定向角度 5 中获取查询参数

【英文标题】：grab query params from redirect angular 5

【发布时间】：2018-10-27 07:01:20

【问题描述】：

我的问题是我使用 auth0 作为我的身份验证服务，现在当用户登录并通过身份验证时，它会被重定向回我的回调 url，然后决定将用户发送到哪里现在我的问题是当你被重定向回来从 auth0 到您的回调 url 在 url 字符串中有 queryParams 像这样..

http://localhost:4200/account/login/callback#access_token="dsadsadsadsa dasdsaa" 仅作为示例，但随后在瞬间删除了查询字符串，并将其留在 http://localhost:4200 现在我正在尝试使用此方法获取查询参数

this.activatedRoute.queryParams.subscribe(params => 
    console.log(params);
);

现在这应该可以了，但是 console.log 每次都是一个空对象，我认为这是因为发生了 url 更改..

有什么方法可以在删除之前获取查询参数吗？？

编辑

基本上发生的事情是我正在通过身份验证，然后我被重定向到

localhost:4200/account/login/callback?acessToken="dasdasdaefssves"

但随后路线更改为

localhost:4200/account/login/callback

在activatedRoute 函数有机会运行之前没有查询参数！

任何帮助将不胜感激！

【问题讨论】：

我认为您必须在NavigationStart and NavigationEnd 签入同时捕获您的路由器的位置

@Sanoj_V 不确定你的意思？

您能告诉我您在路由器中设置的路径类型吗？

这一切都是通过 auth0 完成的，所以你设置了一个 redirectUrl，即http://localhost:4200/account/login/callback

你试过相同的路径不同的参数url像这样：/account/login/callback和/account/login/callback/:acessToken

【参考方案1】：

我没有得到您的完整问题，但据我所知。您想从 URL 中获取查询参数。

从 URL 获取查询参数你需要这样做。

 constructor(private activatedRoute: ActivatedRoute)

这是您从 URL 获取所有查询参数的方式。

this.activatedRoute.queryParamMap
                .map((params: Params) => params.params)
                .subscribe( (params) => 
                     if(params && params['access_token'])
                        console.log(params['access_token']);
                     
                 );

【讨论】：

对不起，这不是问题，基本上发生的情况是查询参数在 url 上存在 1 秒，然后才被删除，所以当 this.activatedRoute 运行时，没有要获取的查询参数，这就是我保留的原因取回一个空对象

【参考方案2】：

请注意您的重定向网址是 http://localhost:4200/account/login/callback?access_token="dsadsadsadsa dasdsaa"

但是角度路由它到localhost:4200/account/callback

注意

您没有在 angular 中定义的 /account/login/callback 路由。但是您有 /account/callback 路由。 Angular 尝试解析路由并将其重定向到 /account/callback 而不使用 queryParams。

以角度定义路线，您的问题将得到解决。

【讨论】：

我声明了这样的路由 /login/callback/:authInfo 但现在我不断被重定向到基本网址？有什么想法吗？

请查看更新后的问题 我有一个错字，我实际上是想一直写 /account/login/callback 所以这不是问题

如果您的身份验证服务重定向到http://localhost:4200/account/login/callback?access_token="dsadsadsadsa dasdsaa"，那么您需要在您的角度项目中为account/login/callback 定义一个路由，因为?access_token="dsadsadsadsa dasdsaa" 是一个查询字符串。

是的，我明白这一点，但我确实定义了这条路线，我只是没有在我的问题中正确输入它，现在已经修复

在您写的评论中声明了一条路线/login/callback/:authInfo。我认为应该改为login/callback。