角度路由可以激活 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 之前,但我无法在 ActivatedRouteSnapshot 和 RouterStateSnapshot 中找到它>.
我希望我已经足够清楚了。
请不要犹豫,询问更多信息。
【问题讨论】:
【参考方案1】:当在守卫内使用路由器时,queryParamsHandling
不会被处理。
您必须通过从激活的路由中提取重定向查询参数来手动设置它们:
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot)
// ...
this.router.navigate(['/login'], queryParams: route.queryParams );
// ...
【讨论】:
以上是关于角度路由可以激活 AuthGuard 传输查询参数的主要内容,如果未能解决你的问题,请参考以下文章