如何以角度从守卫重定向到子路线 [英] How to redirect to child route from guard in angular

问题描述

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

绝对导航的问题 导航到子路由时，父组件上的守卫会在循环中再次调用.

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

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

路线

const appRoutes: Routes = [{路径:'富'，组件:FooComponent，canActivate: [重定向保护],孩子们: [{路径:'foo-child'，组件:FooChildComponent}]}];

canActivate() 保护

canActivate(路线:ActivatedRouteSnapshot，状态:RouterStateSnapshot): Observable|Promise|boolean {console.log('guard:', route, state, this.route);//想法:创建自己的 ActivatedRoute 并给它来自 ActivatedRouteSnapshot 的值，它知道 'foo/'const foo: ActivatedRoute = new ActivatedRoute();控制台日志(富)；//错误:无法匹配任何路由//我认为是因为没有相对于调用 canActivat 时的路由.路由器尚未导航到/foo/"this.router.navigate(['../foo-child'], { relativeTo: this.route});//无限循环错误，因为 '/foo/' 有这个守卫，然后会被再次调用//this.router.navigate(['/foo/foo-child']);//导航也返回 true.也许只是返回那个.返回真；}

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

解决方案

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

StackBlitz 示例:https://stackblitz.com/edit/angular-redirect-带参数

路由

const appRoutes: Routes = [{路径:'富'，组件:FooComponent，canActivateChild: [ RedirectionGuard ],孩子们: [{小路: ''，路径匹配:'完整'，重定向到:'foo-child-1'},{路径:'foo-child-1'，组件:FooChildComponent},{路径:'foo-child-2'，组件:FooChildComponent}]},];

守卫

canActivate(路线:ActivatedRouteSnapshot，状态:RouterStateSnapshot): Observable|Promise|boolean {console.log('params:', route.params, route.url);如果(！route.params.skip){this.router.navigate(['/foo/foo-child-2', {skip: true }], {查询参数:{跳过:1}});}返回真；}canActivateChild(路线:ActivatedRouteSnapshot，状态:RouterStateSnapshot){返回 this.canActivate(route, state);}

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.

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 Example: https://stackblitz.com/edit/angular-qbe2a7

routes

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

canActivate() in guard

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.

解决方案

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

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

routing

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
      }
    ]
  },
];

guard

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);
  }

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