角度路由可以激活AuthGuard傳輸查詢參數

Question

我想要實現的功能是能夠有這樣的URL：

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

這將預先填寫我的登錄表單。

當這些參數直接以這種方式設置時，登錄表單已經預先填寫： https ： //myapp.com/en/login？orgid = xxxx＆username = yyy

這個網址是通過電子郵件發送的，我們可以說我應該將完整的網址放在電子郵件中（使用/ en / login ）。 但事實是該應用程序是multilang AOT，我希望電子郵件鏈接是獨立的。

該應用程序由兩個路由器組成：

• 處理登錄頁面的默認應用程序路由器以及所有其他不安全的組件和服務
• 路由所有安全組件並提供服務的主路由器。 它有一個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中找到它。

我希望我很清楚。

請不要猶豫，要求提供更多信息。

Answer 1

在防護中使用路由器時，不處理queryParamsHandling 。 您必須通過從激活的路徑中提取重定向查詢參數來手動設置重定向查詢參數：

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