角度服务返回两次答案

【问题标题】：angular service returning twice角度服务返回两次
【发布时间】：2018-04-12 15:03:58
【问题描述】：

我正在尝试在我的 Angular 项目中实现 RoleGuardService。我有一条受保护的路线，用户需要具有特定的角色。

export class RoleGuardService implements CanActivate {

  constructor(public loginService: LoginService, public router: Router) { }

  canActivate(route: ActivatedRouteSnapshot): boolean {

    const expectedRole = route.data.expectedRole;
    const userDetails = this.loginService.getUserDetails();

    if (userDetails != null) { 
      console.log('not null');

      userDetails.roles[0].forEach(e => {
        if(e.name === expectedRole){
          console.log('return true');
          return true;
        }
      });
    }

    this.router.navigate(['login']);
    console.log('return false');
    return false;
  }
}

当单击具有预期角色的用户的路线时，我看到不为空，返回真，在控制台返回假.. 我有 canActivate 返回布尔值。调用 loginService.geUserDetails() 将返回 jwt 解码，因此不确定为什么异步发生任何事情。

public getUserDetails() {
    return this.jwtHelper.decodeToken(sessionStorage.getItem('AuthToken'));
  }

请帮忙，其他类似的问题涉及我在这里不做的http请求。希望我缺少一些简单的东西。提前致谢。

【问题讨论】：

标签： angular routes jwt

【解决方案1】：

您在 forEach 范围内返回 true。你必须在外面做：

export class RoleGuardService implements CanActivate {

  constructor(public loginService: LoginService, public router: Router) { }

  canActivate(route: ActivatedRouteSnapshot): boolean {

    const expectedRole = route.data.expectedRole;
    const userDetails = this.loginService.getUserDetails();

    if (userDetails !== null) { 
      console.log('not null');
      if (userDetails.roles[0].some(e => e.name === expectedRole)) {
          return true;
      }
    }

    this.router.navigate(['login']);
    console.log('return false');
    return false;
  }
}

祝你好运！

【讨论】：

【解决方案2】：

javascript array.forEach(...) 只能通过抛出异常来停止（参见here）。

如果您想停止循环，只需使用简单的for-loop：

...
for(let i = 0; i < userDetails.roles[0].length; i ++) {
    let e = userDetails.roles[0][i];
    if(e.name === expectedRole){
        console.log('return true');
        return true;
    }
});
...

【讨论】：