Как перенаправить на дочерний маршрут из охранника в angular

Как мне перенаправить на дочерний маршрут от охранника родительского маршрута, одновременно защищая дочерние маршруты от прямого доступа *?

Проблема с абсолютной навигацией, защита родительского компонента вызывается снова в цикле при переходе к дочернему маршруту.

Проблема с относительной навигацией заключается в том, что охранник защищает родительский маршрут, поэтому еще нет активированного маршрута, относительно которого можно было бы перемещаться. Также это, вероятно, не защитит дочерние маршруты. Возможно, тот же охранник можно было бы использовать с дочерними маршрутами или с 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;
  }

* Почему бы не добавить охранников ко всем детям, спросите вы. Мне нужно перенаправить с родительского маршрута на множество разных дочерних маршрутов в зависимости от состояния приложения. В настоящее время я использую один из дочерних маршрутов для перенаправления с этого компонента, но это не защищает дочерние маршруты от прямой навигации пользователя.


angular angular-router-guards angular-router
person Markus    schedule 25.09.2018    source источник
comment
вы пытаетесь перенаправить с одного дочернего компонента на другой дочерний компонент или с компонента на дочерний компонент другого компонента?   -  person Shadab Faiz    schedule 26.09.2018
comment
От родительского маршрута к одному из его дочерних маршрутов.   -  person Markus    schedule 26.09.2018

Ответы (1)


arrow_upward
2
arrow_downward

Один из способов добиться этого - использовать параметры 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);
  }
person Markus    schedule 26.09.2018