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

АутСервис

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']);
}

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

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

Защита авторизации

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+? Этот подход используется в большинстве проектов?

javascript angular

21.05.2019 22:27

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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');
}

Защита авторизации

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

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

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

21.05.2019 22:52

Другие вопросы по теме

Как синхронизировать список из коллекции firestore в реальном времени (компонент + сервис)

Назначение шаблона HTML в Angular

При циклическом просмотре объектов с критериями отображаются пустые маркеры, если они не соответствуют

Отображение класса Bootstrap в Angular NgFor NgStyle

Инъекция директивы Angular @Optional игнорируется

Тег HTML <div> с форматированием

Можно ли создать динамический URL-адрес в тексте с помощью Angular 7

Получить список всех идентификаторов дочерних объектов после того, как пользователь нажмет на angular6

Получить объект результата как неопределенный при получении данных из веб-API. только при первом звонке

Как сделать расширяемые строки таблицы в цикле ngFor [Angular]?