Question

我有一个canActivate Guard，它检查jwt令牌的URL并将其保存为cookie（然后将检查cookie）。如果没有令牌，那么页面将被重定向到另一个允许用户登录并创建jwt的应用程序。

当我向后导航时，我得到一个像：

这样的网址

http://localhost:3000/?jwt=...

AppModule执行以下操作：

RouterModule.forRoot([{path: "**", redirectTo: "/import", pathMatch: "full"}], {useHash: true})

然后在ImportModule：

RouterModule.forChild([
            { path: "import", component: ImportComponent, canActivate: [ImportGuard] }
        ])

问题是我可以看到网址从localhost:3000/?jwt=...更改为localhost:3000/#/import并且参数丢失了，所以当我检查它时它不存在。

我是Angular2的新手，几乎肯定做错了什么，但我很难找到如何从外部网址获取参数的任何示例。

我无法更改外部服务以返回网址/#/import?jwt=...而且我觉得我不需要因为当前的实施已与ReactJS一起使用，所以我觉得喜欢它应该可以使用Angular。

有什么建议值得赞赏吗？如果您需要更多信息，请告诉我。

由于

Answer 1

为什么您无法在导入下使用子路由。例如

  RouterModule.forChild([
     { path: "import", component: ImportComponent, canActivate:[ImportGuard],
     Children:[
             { path: "/:jwt", component: ImportComponent, canActivate: [ImportGuard]}] }
            ])

Answer 2

我偶然发现了同样的问题，如何保持url params并重定向路由配置要绕过此不受支持的操作，这可能有所帮助：

export const routes: Routes = [
  {
    path: '',
    component: RedirectComponent,
    pathMatch: 'full'
  }
 }, [... your other routes config]
 ];

和RedirectComponent在init：

this.router.navigate(['/import'], {relativeTo: this.route , preserveQueryParams : true});

Answer 3

我通过以下方式解决了这个问题

RouterModule.forRoot([{path: "**", component: AppComponent, pathMatch: "full"}], {useHash: true})

然后在AppComponent中我使用document.URL来获取URL并直接从字符串中获取参数。我不喜欢这个解决方案，因为它有点hacky并且更倾向于使用路由/路由器。

Angular2 redirect在调用canActivate之前导致URL参数丢失

3 个答案: