时间戳

首页 > 解决方案 > 未在重定向的路由路径上调用 Angular Guard

angular - 未在重定向的路由路径上调用 Angular Guard

问题描述

因此，可以通过多种方式进入我的应用程序。

http://localhost:4200 和 http://localhost:4200/home

如果指向我的应用程序（来自外部应用程序）的链接上有一个查询参数，我想抓住它。我创建了QueryParamCheckGuard一个@Injectable({providedIn: 'root',}). 现在，我只有一个console.log('In QueryParamCheckGuard');in thecanActivate和canActivateChild方法来查看它何时被调用。现在，它不会在任何重定向的路径上被调用。

在我的应用程序中，我有子项目。主路由如下所示：

  {
    path: 'home',
    canActivate: [QueryParamCheckGuard],
    canActivateChild: [QueryParamCheckGuard],
    data: {
      path: 'App Home Path',
    },
    loadChildren:
      '../../projects/home-app/src/app/app.module#HomeAppModule',
  },
  {
    path: '',
    canActivate: [QueryParamCheckGuard],
    canActivateChild: [QueryParamCheckGuard],
    data: {
      path: 'App Empty Path',
    },
    redirectTo: '/home',
    pathMatch: 'full',
  }

在 HomeAppModule 中，路由是这样的：

{
    path: 'home',
    component: AppComponent,
    canActivate: [QueryParamCheckGuard],
    canActivateChild: [QueryParamCheckGuard],
    data: {
      path: 'Sub-proj Home Path',
    },
    children: [
      { path: '', component: HomePageComponent },
    ],
}

路由一切正常，但是当我输入 http://localhost:4200?id=test 时，不会在主应用程序的路由上调用 QueryParamCheckGuard，该path: ''路由重定向到主应用程序path: 'home'，并且在它到达子项目时path: 'home', id 查询参数被剥离。我知道它没有被其他路由调用，因为我向每个路径的数据添加了一个路径属性来标识每个路径。我那时console.log(route.data.path);。

如果我点击 http://localhost:4200/home?id=test，QueryParamCheckedGuard 被点击，我可以获取 id 查询参数。除了要求所有外部应用程序调用 /home url 之外，我是否遗漏了一些东西来获取重定向到 home 以获取查询参数的路径？

标签： angularangular-routerquery-parametersangular-router-guards

解决方案

所以，我发现这是一个存在了大约 3 年的问题。 https://github.com/angular/angular/issues/18605 基本上，守卫不会在重定向的路径上被调用。

我的解决方法是更改redirectTo: '/home',​​为

data: {
  redirectTo: '/home',
},
children: [],

这样做的原因是children:[]允许守卫被召唤。然后，在警卫中，我检查是否route.data.redirectTo存在，如果存在，则返回 aUrlTree中的值route.data.redirectTo。

我还意识到更改主应用程序空路径上的重定向并没有做任何事情。我必须在 HomeAppModule 的路由上添加一个空检查并在那里进行。我现在可以获取查询参数并将它们保存起来，以备在重定向后被剥离时使用。

推荐阅读