角度路由可以激活AuthGuard传输查询参数

Question

我想要实现的功能是能够拥有这样的网址：

https://myapp.com/?orgId=xxx&username=yyy

这将预先填写我的登录表单。

登录表单已经预先填写时，这些参数直接这样设置：https://myapp.com/en/login?orgId=xxx&username=yyy

这个网址是通过电子邮件发送的，我们可以争辩说我应该简单地将完整的网址放在电子邮件中(带有/en/login(。但问题是该应用程序是多语言 AOT，我希望电子邮件链接与 lang 无关。

该应用程序由两个路由器组织：

• 处理登录页面以及所有其他不安全组件和服务的默认应用程序路由器
• 路由所有安全组件并提供服务的主路由器。它有一个可以激活身份验证，在未进行身份验证时重定向到登录页面。

我在AuthGuard中调用naving时添加了queryParamsHandling："preserve">选项。

this.router.navigate(['/login'], {queryParamsHandling: 'preserve'});

以下是我从启用跟踪中获得的控制台日志：

Router Event: NavigationStartvendor.bundle.js:16782
NavigationStart(id: 1, url: '/?param=123')  vendor.bundle.js:16773:35
Router Event: RoutesRecognizedvendor.bundle.js:16782
RoutesRecognized(id: 1, url: '/?param=123', urlAfterRedirects:'/dashboard', state: Route(url:'', path:'') { Route(url:'', path:'') { Route(url:'dashboard', path:'dashboard') }  } )  vendor.bundle.js:16773:35
[AuthGuard] route Object { url: Array[0], params: Object, queryParams: Object, fragment: null, data: Object, outlet: "primary", component: MainComponent(), _routeConfig: Object, _urlSegment: Object, _lastPathIndex: -1, 2 de plus… }  main.bundle.js:2629:9
[AuthGuard] state Object { _root: Object, url: "/dashboard" }  main.bundle.js:2630:9
Router Event: NavigationCancelvendor.bundle.js:16782
NavigationCancel(id: 1, url: '/?param=123')  vendor.bundle.js:16773:35
Router Event: NavigationStartvendor.bundle.js:16782
NavigationStart(id: 2, url: '/login')  vendor.bundle.js:16773:35
Router Event: RoutesRecognizedvendor.bundle.js:16782
RoutesRecognized(id: 2, url: '/login', urlAfterRedirects: '/login', state: Route(url:'', path:'') { Route(url:'login', path:'login') } )  vendor.bundle.js:16773:35
Router Event: NavigationEndvendor.bundle.js:16782
NavigationEnd(id: 2, url: '/login', urlAfterRedirects: '/login')  vendor.bundle.js:16773:35

我还打印了AuthGuardcanActivate(route：Activated RouteSnapshot，状态：RouterStateSnapshot(的输入。

我们可以看到参数在AuthGuard可以激活之前就已经存在，但我无法在ActiveRouteSnapshot和RouterStateSnapshot中找到它。

我希望我足够清楚。

请随时询问更多信息。

Answer 1

在防护中使用路由器时，不处理queryParamsHandling。 您必须通过从激活的路由中提取重定向查询参数来手动设置它们：

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
// ...
this.router.navigate(['/login'], { queryParams: route.queryParams });
// ...
}