角路由可以激活AuthGuard传输查询参数 [英] Angular routing canActivate AuthGuard transmit query params

问题描述

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

The functionality I want to achieve is to be able to have an url like that :

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

这将预先填写我的登录表格.

That will pre-fill my login form.

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

The login form already pre-filled when these parameters when they are directly set this way : https://myapp.com/en/login?orgId=xxx&username=yyy

此url是通过电子邮件发送的，我们可以争辩说我应该将完整的url放入电子邮件中(使用/en/login ).但事实是该应用程序是多语言AOT，我希望电子邮件链接独立于语言.

This url is sent in an email, and we can argue that I should simply put the full url in the email (with the /en/login). But the thing is that the app is multilang AOT and I would prefer the email link to be lang independent.

该应用由两个路由器组成:

The app is organized with two router :

• 默认的 app 路由器，用于处理登录页面以及所有其他不安全的组件和服务
• 主路由器，用于路由所有受保护的组件并提供服务.它具有一个canActivate AuthGuard，可以在未通过身份验证时重定向到登录页面.

• the default app router who handle the login page and all the other unsecured components and services
• the main router who route all the secured components and provide the services. It has a canActivate AuthGuard who redirect to the login page when not authenticated.

在AuthGuard中调用导航时，我添加了 queryParamsHandling:'preserve'选项.

I've added the queryParamsHandling: 'preserve' option when calling navigate in the AuthGuard.

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

这是启用跟踪后获得的控制台日志:

Here are the console logs I've got from enabling tracing :

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

我还打印了AuthGuard的输入 canActivate(route:ActivatedRouteSnapshot，状态:RouterStateSnapshot).

I've also printed the inputs of the AuthGuard canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot).

我们可以看到 param 就在AuthGuard可以激活之前存在，但是我无法在 ActivatedRouteSnapshot 或 RouterStateSnapshot .

We can see that the param is present right before the AuthGuard canActivate, but I not able to find it in the ActivatedRouteSnapshot nor the RouterStateSnapshot.

我希望我足够清楚.

请随时询问更多信息.

推荐答案

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

When using router inside a guard, the queryParamsHandling is not handled. You have to set the redirection query params manually by extracting them from the activated route:

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

这篇关于角路由可以激活AuthGuard传输查询参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！