首页 文章

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

提问于
浏览
3

我想要实现的功能是能够拥有这样的URL:

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

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

当这些参数直接以这种方式设置时,登录表单已经预先填写:https://myapp.com/en/login?orgid = xxxx&username = yyy

这个网址是通过电子邮件发送的,我们可以说我应该将完整的网址放在电子邮件中(使用/ en / login) . 但问题是应用程序是multilang AOT,我更喜欢电子邮件链接是独立的 .

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

  • 处理登录页面和所有其他不安全组件和服务的默认 app 路由器

  • main 路由器路由所有安全组件并提供服务 . 它有一个canActivate AuthGuard,在未经过身份验证时会重定向到登录页面 .

我在AuthGuard中调用导航时添加了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

我还打印了AuthGuard canActivate的输入(路由:ActivatedRouteSnapshot,状态:RouterStateSnapshot) .

我们可以看到param存在于AuthGuard canActivate之前,但我无法在ActivatedRouteSnapshot和RouterStateSnapshot中找到它 .

我希望我足够清楚 .

请不要犹豫,要求提供更多信息 .

1 回答

  • 10

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

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

相关问题