1

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

点击主菜单，我重定向到其中一个子菜单，但有时无法访问此子菜单 - 然后我想重定向到下一个兄弟：

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

现在我可以计算出“有时”。我尝试使用空路径 ('') 和CanActivate-Guard 创建三个路由。与此类似：

{
    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）。

我的方法的问题是它redirectTo甚至在我的canActivate-method 被调用之前就被执行了。

最好的方法是什么？

4

1 回答 1

3

永远不会调用您的路由保护的原因是包含 a 的路由定义redirect在所有情况下都被认为只是重定向。因此，每当用户点击我想立即重定向的这条路径时，Angular 都会进行重定向。在这种情况下，路由守卫不会生效。

为了实现您正在寻找的内容，您可能需要将重定向移动到您的路由守卫中。除了返回 true 和 false 之外，路由守卫还可以在转换期间重定向而不是取消它。

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

接下来，你的路由守卫的逻辑

  1. 检查用户是否可以访问该路由
  2. 如果是，让用户继续路由
  3. 如果没有将用户重定向到新路由并在之后返回 false

重定向可以通过简单地注入Router你的路由保护和调用来实现this.router.navigate(['theNextSubmenuState']);。

这种路由守卫的示例可能如下所示：

@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-认证

于 2018-06-06T13:25:57.673 回答