angular - 如何以 Angular 从守卫重定向到子路线

Question

如何从父路由的守卫重定向到子路由，同时保护子路由不被直接访问*？

绝对导航问题导航到子路由时，在循环中再次调用父组件上的保护。

相对导航问题是守卫正在保护父路线，因此还没有相对于导航的激活路线。此外，这可能不会保护子路由。也许同样的守卫也可以与子路由或 CanActivateChildren 一起使用。

Stackblitz 示例:https://stackblitz.com/edit/angular-qbe2a7

路线

const appRoutes: Routes = [
  {
    path: 'foo',
    component: FooComponent,
    canActivate: [ RedirectionGuard ],
    children: [
      {
        path: 'foo-child',
        component: FooChildComponent
      }
    ]
  }
];

守卫中的 canActivate()

canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean>|Promise<boolean>|boolean {

    console.log('guard: ', route, state, this.route);

    // idea: create own ActivatedRoute and give it the values from ActivatedRouteSnapshot which knows about 'foo/'
    const foo: ActivatedRoute = new ActivatedRoute();
    console.log(foo);

    // Error: Cannot match any routes
    // I think because there is no route to be relative to when canActivat is called. Router has not yet navigated to '/foo/'
    this.router.navigate(['../foo-child'], {               relativeTo: this.route
    });

    // Errors with infinite loop because '/foo/' has this guard which will then be called again
    //this.router.navigate(['/foo/foo-child']);

    // navigate returns true also. maybe just return that.
    return true;
  }

*为什么不为您可能会问的所有 child 添加 guard 。我需要根据应用程序的状态从父路由重定向到许多不同的子路由。我目前正在使用其中一个子路由从该组件重定向，但这并不能保护用户直接导航的子路由。

Answer 1

实现此目的的一种方法可能是使用 url 参数，在进入父路由时使用 canActivateChild 和 redirectTo 子路由。

StackBlitz 示例:https://stackblitz.com/edit/angular-redirect-with-params

路由

const appRoutes: Routes = [
  {
    path: 'foo',
    component: FooComponent,
    canActivateChild: [ RedirectionGuard ],
    children: [
      {
        path: '',
        pathMatch: 'full',
        redirectTo: 'foo-child-1'
      },
      {
        path: 'foo-child-1',
        component: FooChildComponent
      },
       {
        path: 'foo-child-2',
        component: FooChildComponent
      }
    ]
  },
];

守卫

canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean>|Promise<boolean>|boolean {

    console.log('params:', route.params, route.url);
    if (!route.params.skip) {
      this.router.navigate(['/foo/foo-child-2', { skip: true }], {
        queryParams: { skip: 1 }
      });
    }

    return true;

  }

  canActivateChild(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ) {
    return this.canActivate(route, state);
  }