Question

我具有以下路由配置：

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

当某些内容路由到此时，我想“自动”包含一些默认的QUERY参数。

例如：

在没有查询参数的情况下，路由/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;
  }
}

Stacbklitz link

Answer 1

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

但是，由于canActivate()防护始终返回true，因此您仍导航到/ 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转移到用户路由。

例如

... //other routes

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

...

forked stackblitz

路由时设置默认查询参数

1 个答案: