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

Posted

技术标签:

【中文标题】角度路由可以激活 AuthGuard 传输查询参数【英文标题】:Angular routing canActivate AuthGuard transmit query params 【发布时间】:2017-12-15 13:57:54 【问题描述】:

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

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

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

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

这个 url 是通过电子邮件发送的,我们可以说我应该简单地将完整的 url 放在电子邮件中(使用 /en/login)。但问题是该应用程序是多语言 AOT,我希望电子邮件链接独立于语言。

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

默认 app 路由器处理登录页面和所有其他不安全的组件和服务 路由器路由所有安全组件并提供服务。它有一个 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(route: ActivatedRouteSnapshot, state: RouterStateSnapshot)

我们可以看到 param 出现在 AuthGuard canActivate 之前,但我无法在 ActivatedRouteSnapshotRouterStateSnapshot 中找到它>.

我希望我已经足够清楚了。

请不要犹豫,询问更多信息。

【问题讨论】:

【参考方案1】:

当在守卫内使用路由器时,queryParamsHandling 不会被处理。 您必须通过从激活的路由中提取重定向查询参数来手动设置它们:

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

【讨论】:

以上是关于角度路由可以激活 AuthGuard 传输查询参数的主要内容,如果未能解决你的问题,请参考以下文章

角度 4 子路由

Angular 2:未处理的承诺拒绝:没有 AuthService 的提供者! ;区域:角度

查询参数更改时,角度路由器导航不会加载页面

关于 Angular 中的 AuthGuard

防止在角度4中在浏览器中重定向写入URL

无法在角度 6 中检查 AuthGuard 中的 JWT 有效性?