Angular 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.

最好的方法是什么?

推荐答案

你的路由守卫从未被调用的原因是包含 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 还提供了一个很好的示例，说明路由保护中的重定向如何在其路由文档中工作 - 请查看本节的第二个代码示例 -> https://angular.io/guide/router#teach-authguard-to-authenticate

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

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