如何从Angular中的守卫重定向到子路由 [英] How to redirect to child route from guard in angular

问题描述

我如何从父路由的后卫重定向到子路由，同时又保护子路由免于直接访问*?

How do I redirect to a child route from a guard of the parent route while also protecting child routes from direct access*?

绝对导航问题，当导航到子路径时，将在循环中再次调用父组件上的防护.

Problem with absolute navigation the guard on the parent component is called again in a loop when navigating to the child route.

相对导航问题是，警卫队正在保护父路线，因此尚没有相对于其导航的已激活路线".同样，这可能不会保护子路线.也许同一个警卫队也可以与子路线或CanActivateChildren一起使用.

Problem with relative navigation is that the guard is protecting the parent route so there is no Activated Route yet to navigate relative to. Also this would probably not protect child routes. Maybe the same guard could also be used with the child routes or with CanActivateChildren.

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

Stackblitz Example: 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;
  }

*为什么不向您可能问到的所有孩子加护卫.我需要根据应用程序的状态从父路由重定向到许多不同的子路由.我目前正在使用子路线之一从该组件进行重定向，但这并不能保护子路线由用户直接导航.

*Why not add guards to all childs you may ask. I need to redirect from the parent route to many different child routes depending on the state of the app. I am currently using one of the child routes to redirect from that component but that does not protect child routes form direct navigation by the user.

推荐答案

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

One way to achieve this could be to use url params, use canActivateChild and redirectTo a child route when entering the parent route.

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

StackBlitz Example: 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);
  }

这篇关于如何从Angular中的守卫重定向到子路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！