时间戳

首页 > 解决方案 > 登录前检查多个条件使用 auth guard

javascript - 登录前检查多个条件使用 auth guard

问题描述

我正在尝试检查多个条件以让用户登录。当用户成功登录时，我能够实施 authguard。用户不仅需要验证，还需要满足登录条件。这是我如何实施身份验证保护来检查用户是否登录。

export class AuthGuard implements CanActivate {
  access: boolean;
  constructor(
    private auth: AuthService,
    private router: Router,
  ) {}
  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ):
    | Observable<boolean | UrlTree>
    | Promise<boolean | UrlTree>
    | boolean
    | UrlTree {
    return this.auth.user$.pipe(
      take(1),
      map((user) => (user ? true : false)),
      tap((isLoggedIn) => {
        if (!isLoggedIn) {
          this.router.navigate(['/login']);
          return false;
        }
        return true;
      })
    );
  }
}

虽然注册用户有一个名为employeewhich is的字段boolean。所以我想实现 auth guard 来登录，这样当用户登录时，它应该满足用户凭据有效并且用户是员工的条件，我尝试使用以下方式进行以下操作，empolyee但是undefined

this.auth.user$.subscribe((res) => {
  this.isEmployee = res.isEmployee;
});
if (!this.isEmployee) {
  console.log(this.isEmployee);
  this.router.navigate(['/login']);
  console.log('user is not employee');
  return false;
}
console.log('user is approved', this.isEmployee);
return true;
}

标签： javascriptangulartypescriptionic-frameworkauth-guard

解决方案

假设您有 keys isLoggedIn，isEmployee您可以执行以下操作：

return this.auth.user$.pipe(
  map((user) => {
    if(user.isLoggedIn && user.isEmployee){
      return this.router.navigate(['login']);
    } else {
      return false;
    }
  })
);

在警卫中使用运算符没有意义take(1)，用户可以尝试任意次数进入页面。

推荐阅读