角度5:有条件地设置默认路线 [英] Angular 5: Conditionally Set Default Route

问题描述

我有一个导航，其中包含三个子菜单及其相应的子路线.现在，某些子菜单是不可见的(ngIf)，具体取决于用户从服务器获得的声明.

I have a navigation with three submenus and their according children routes. Now some of the submenus are not visible (ngIf), depending on the claims a user got from the server.

单击主菜单，我重定向到子菜单之一，但有时无法访问该子菜单-然后，我想重定向到下一个兄弟菜单:

Wenn the main menu is clicked, I redirect to one of the submenus but sometimes this submenu is not accessible - then I would like to redirect to the next sibling:

{
    path: 'mymainmenue',
    children: [
        { path: 'submenu1', component: SubMenu1Component },
        { path: 'submenu2', component: SubMenu2Component },
        { path: 'submenu3', component: SubMenu3Component },
        { path: '', redirectTo: 'submenu1' },
    ]
}

现在我可以计算出有时".我试图用空路径('')和CanActivate -Guard创建三个路由.与此类似:

Now the "sometimes" I'm able to calculate. I've tried to create three routes with an empty path ('') and a CanActivate-Guard. Similar to this:

{
    path: 'mymainmenue',
    children: [
        { path: 'submenu1', component: SubMenu1Component },
        { path: 'submenu2', component: SubMenu2Component },
        { path: 'submenu3', component: SubMenu3Component },
        { path: '', redirectTo: 'submenu1', canActivate: [ClaimsGuard] },
        { path: '', redirectTo: 'submenu2', canActivate: [ClaimsGuard] },
        { path: '', redirectTo: 'submenu3', canActivate: [ClaimsGuard] },
    ]
}

希望我可以使用路由和规则返回false，以防例如 submenu1 不可见并且路由器会选择下一条可能的路由(重定向到 submenu2 ).

hoping I could use the route and my rules to return false in case for example the submenu1 is invisible and the router would chose the next possible route (redirect to submenu2).

我的方法的问题是redirectTo甚至在调用我的canActivate方法之前就已执行.

The problem with my approach is that redirectTo gets executed even before my canActivate-method is called.

做到这一点的最佳方法是什么?

What would be the best way to do this?

推荐答案

从不调用路由保护程序的原因是，在所有情况下，都将包含redirect的路由定义假定为只是重定向.因此，Angular会采用重定向，就像用户单击此路径时要立即重定向一样.在这种情况下，路由防护不会生效.

The reason your route guard is never called is that a route definition containing a redirect is assumed to be just a redirect in all cases. So Angular takes the redirect as whenever the user hits this path I want to immediately redirect. The route guard doesn't come into effect in this scenario.

要实现所需的功能，可能需要将重定向移动到路由防护中.除了返回true和false以外，路由保护程序还可以在过渡期间重定向，而不是取消它.

To achieve what you are looking for you might want to move the redirect into your route guard. In addition to returning true and false a route guard can also redirect during the transition instead of cancelling it.

首先，您要删除路由对象中的重定向.

接下来，您的路由保护程序的逻辑

1. 检查用户是否可以访问此路线
2. 如果是，则让用户继续路由
3. 如果没有重定向用户到新路由，然后返回false

只需将Router注入路由防护并调用this.router.navigate(['theNextSubmenuState']);，即可实现重定向.

The redirect can be achieved by simply injecting Router into your route guard and calling this.router.navigate(['theNextSubmenuState']);.

这样的路由守卫的示例可能看起来像这样:

An example of such a route guard could look like this:

@Injectable()
export class ClaimsGuard implements CanActivate {
  constructor(private router: Router, private yourClaimsService: YourClaimsService) {}

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

  private checkClaimsAccess(state: RouterStateSnapshot) {
    if(this.yourClaimsService.userHasAccess(state) {
      return true;
    } else {
      const nextSubmenu = this.getNextSubmenuState(state);
      this.router.navigate([nextSubmenu])
      return false;
    }
  }

  private getNextSubmenuState(state: RouterStateSnapshot): string {
    //Some logic to figure out which submenu state you would like to go to next
  }
}

Angular还为路由防护中的重定向如何在其路由文档中工作提供了一个很好的示例-查看本节的第二个代码示例->

Angular also provides a pretty good example for how redirects in route guards work on their routing documentation - take a look at the 2nd code example of this section -> https://angular.io/guide/router#teach-authguard-to-authenticate

这篇关于角度5:有条件地设置默认路线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！