Блог

Главная - Вопросы по программированию - Проверьте несколько условий перед входом в систему с помощью auth guard

Проверьте несколько условий перед входом в систему с помощью auth guard

javascript #angular #typescript #ionic-framework #auth-guard

#javascript #angular #typescript #ionic-framework #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;
      })
    );
  }
}

При регистрации у пользователя есть поле , которое называется employee which 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;
}

Комментарии:

1. Подписка там не будет работать. Почему бы просто не добавить это в ваше условие? Например: map((user) => !!user amp;amp; user.isEmployee)

2. @MikeOne Я тоже пытался использовать это, но он не показывает никаких изменений.

3. this.auth.user$.subscribe((res) => { this.isEmployee = res.isEmployee; }); что это за код? Вы поделились своим guard , но что это за код?

4. @YogendraR код тот же, но я заменил канал на this.auth.user$.subscribe((res) => { this.isEmployee = res.isEmployee; }); оба они являются защитным кодом. Вышеупомянутый проверяет аутентификацию, а второй — я пытался проверить аутентификацию и авторизацию, но работал некорректно.

5. что не так, когда вы используете канал? и y с помощью оператора take() ? что у all info user$ есть?

Ответ №1:

Предполагая, что у вас есть ключи isLoggedIn , isEmployee вы можете сделать следующее:

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

Нет смысла использовать operator take(1) в guard, пользователь может пытаться любое количество раз попасть на страницу.

Ответ №2:

Похоже, что вы пытаетесь реализовать действия аутентификации и авторизации одновременно в вашем auth-guard.

Вы можете реализовать проверку учетных данных пользователя и роли при выполнении действия аутентификации на серверной части и избежать осложнений в вашей защите.

Или вы можете посетить это https://www.npmjs.com/package/keycloak-angular#authguard и проверьте, как и то, и другое реализовано в рамках единого auth-guard.

Метки: