即使存在 cognitoUser，Angular 路由保护也不会呈现仪表板答案

【问题标题】：Angular route guard doesn't render dashboard even if a cognitoUser is present即使存在 cognitoUser，Angular 路由保护也不会呈现仪表板
【发布时间】：2021-09-27 17:37:12
【问题描述】：

我正在尝试使用 Cognito 和路由保护来保护我的 Angular 应用程序中的一些视图。基本上我要做的是检查是否存在活动的 Cognito 用户会话，如果是，则加载页面。但是，即使存在有效的 Cognito 用户，该应用程序也会将我重定向回登录页面。我是 Angular 的初学者，所以我对自己错过的东西感到沮丧。

这是我的 Angular 路由守卫中 canActivate 函数的代码。

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
    
        var poolData = {
          UserPoolId: environment.cognitoUserPoolId, 
          ClientId: environment.cognitoAppClientId
        };
  
        var userPool = new CognitoUserPool(poolData);
        var cognitoUser = userPool.getCurrentUser(); // could console.log the user without problem
        
        if (cognitoUser != null) {
          cognitoUser.getSession((err: any, session: any) => {
            if (err) {
              alert(err.message || JSON.stringify(err));
              return;
            }
            
            console.log('session validity: ' + session.isValid());
            const isSessionValid = session.isValid();
            console.log(isSessionValid) // this also get printed as 'true'
            if (!isSessionValid) {
              // redirect the user
              this.router.navigate(['signin']); // but this is fired
            }
            return isSessionValid;
          });
        }
        this.router.navigate(['signin']); //maybe this also get fired ?
        return false
  }
  
}

我已将此保护应用于我的app-routing.module.ts 的routes 数组中的一些路由，如下所示。

{ path: 'sessions', component: SessionsComponent,canActivate: [AuthGuard] },
{ path: 'dashboard', component: DashboardComponent,canActivate: [AuthGuard] },

有人可以指出解决此问题的方法，以便身份验证流程顺利进行吗？非常感谢所有帮助。

【问题讨论】：

标签： angular amazon-cognito angular2-routing angular-route-guards

【解决方案1】：

所以问题是我没有从canActivate 方法返回任何东西。将其更改为以下内容即可解决问题。

canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree  {
        var isAuth = false; // new variable to keep the auth status

        var poolData = {
          UserPoolId: environment.cognitoUserPoolId, 
          ClientId: environment.cognitoAppClientId
        };
  
        var userPool = new CognitoUserPool(poolData);
        var cognitoUser = userPool.getCurrentUser();
        
        if (cognitoUser != null) {
          cognitoUser.getSession((err: any, session: any) => {
            if (err) {
              alert(err.message || JSON.stringify(err));
              return;
            }
            
            isAuth = session.isValid(); // assigning auth status inside the callback
          })
        }
        if(!isAuth) {
          this.router.navigate(['signin'])
        }
        return isAuth; // return isAuth
  }

【讨论】：