Каков наилучший подход для авторизации пользователя?

Question

AuthService

login(user: User){
    return this.http.post<any>(`${this.API_URL}`, {
        email: user.username,
        password: user.password
    });
}

isUserLoggedIn(){
    return this.http.get<any>(`${this.API_URL}/1`);
}

logoff(){
    //this.loggedIn.next(null);
    this.router.navigate(['/login']);
}

LoginComponent

onSubmit(){
    this.submitted = true;
    this.authService.login(this.loginForm.value).subscribe(r => {
        if(r.success){
            this.router.navigate(['/home']);
        }
    });
}

Auth Guard

canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
): any{
    return this.authService.isUserLoggedIn()
    .pipe(
        map(res => {
            if (res.isAuth){
                return true;
            }
            this.router.navigate(['/login']); 
            return false;
        })
    );
}

• LoginComponent: отправляет данные в API для входа (username и password). API вернет success = true, если пользователь существует в базе данных;
• Guard: (isUserLoggedIn()) проверить, вошел ли пользователь в систему и если session еще жив.

Есть ли лучший подход для пользователя authentication в Angular 4+? Этот подход используется в большинстве проектов?

Answer 1

Возможно, вы могли бы хранить данные пользователя в локальном хранилище при первом входе в систему.Затем используйте BehaviorSubject из rxjs и конвертируйте его в Observable.Таким образом, каждый раз, когда пользователь вносит какие-либо изменения (язык, имя и т. Д.), В любой части вашего приложения вы можете получить доступ к этой информации.

Вот так:

Компонент входа

this.userService.login(username, password).subscribe(s => {
  this.userService.user = s;
  this.router.navigate(['/home'])
})

Служба пользователя

private userSubject: BehaviorSubject<any> = new BehaviorSubject<any>(null);
readonly currentUser$: Observable<any> = this.userSubject.asObservable();

set user(user: any) {
  // manipulate your user info and put it in localStorage after
  this.userSubject.next(user);
}

get user() {
  return this.userSubject.value ? this.userSubject.value : window.localStorage.getItem('user');
}

Auth Guard

Теперь вы можете проверить текущего пользователя с помощью метода get или подписаться на наблюдаемого пользователяЭто ваш выбор

canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
): any{
    return this.userServivce.user ? true : false;
}  

Вы можете усложнить свою логику, как хотите.