2

我有以下路线配置：

const routes: Routes = [
  // another routes
  { component: UsersListComponent, path: 'users' }
];

我想“自动”包含一些默认的查询参数，当某些东西路由到这个时。

例如：

路由/users变为/users?p=1s&15，当它没有查询参数时。

我只是试图用警卫来做这件事（我什至不确定这是做这件事的最佳选择）。下面是我的一段实际代码：

canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    // Just for make it clear:

    if (state.url === '/users') {
      this.router.navigate([], {
        queryParams: {
          p: 1,
          s: 15
        },
        relativeTo: this.activatedRoute
      });
    }

    return true;
  }
}

斯塔克利茨链接

4

1 回答 1

2

你return false的canActivate()后卫少了一个。此外，this.router.navigate([])将您导航到当前路线，可以是 /my-default-page 等。因此，它会将您导航到 /my-default-page?p=1&s=15。它没有使用查询参数/users?p=1&s=15将您导航到下一条路线。

然而，因为canActivate()守卫总是返回真，你仍然被导航到 /users。

要解决这个问题：

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
      console.log('state', state.url)
    if (state.url === '/users') {
      console.log("true");
      this.router.navigate([state.url], { //need to change this to state.url, which is your next route 
        queryParams: {
          p: 1,
          s: 15
        },
        relativeTo: this.activatedRoute
      });
      return false; //you're missing this
    }

    return true;
  }

此外，由于您的用例要求不带查询参数的 /users 始终路由到 /users?p=1&s=15，因此您应该将您的路由转移canActivate:[myAuthGuard到 users 路由。

例如

... //other routes

{
  path: 'users',
  canActivate: [MyAuthGuard],
  component: MyComponent,
  runGuardsAndResolvers: "always" //add this to always trigger AuthGuard
},

...

分叉的堆栈闪电战

于 2019-07-27T02:36:50.683 回答