Angular 6, Rxjs 6, вход в систему с использованием HttpClient - PullRequest
Новая
       14

Angular 6, Rxjs 6, вход в систему с использованием HttpClient

0 голосов
/ 28 августа 2018

Я никогда не думал о себе как о глупом, но мне, возможно, придется пересмотреть эту позицию. Мне здесь не хватает чего-то очень простого, но я просто не могу этого понять.

В моем login компоненте у меня есть код вроде: 

if (this.authenticationService.login(user,password)) {
    // Navigate somewhere else now the user is logged in
} else {
    // Display an error message and leave the login screen in place
}

Естественно, это ожидание логического ответа, указывающего на успех или неудачу входа в систему.

В AuthenticationService есть функция входа в систему. Затем он добавляет заголовки и строит тело перед вызовом http.put<any>

Итак, мой AuthenticationService.login: boolean

делает фактический вызов http.put. Очевидно, что это не будет выполнено до вызова subscribe().

Мой вопрос заключается в том, что, на мой взгляд, у меня есть два варианта. Один из них заключается в том, чтобы как-то задерживать return success; до тех пор, пока .subscribe() не обработает, или немедленно возвращать Observable<boolean> (изменяя прототип функции, чтобы указать на это), а затем отправлять observer.next(true), когда .subscribe() завершен.

Проблема в том, что, несмотря на чтение документации со всего мира, большая часть которой противоречива, я не могу понять, как достичь какой-либо из этих целей. Обратите внимание, что я использую Angular 6 и RxJS 6.

Ответы [ 2 ]

0 голосов
/ 28 августа 2018

Я нашел решение, но не уверен, что оно лучшее, но оно работает. Вот сокращенное AuthenticationService.login. 

login(params): Observable<boolean> {
    var result: boolean;
    return this.http.put<any>(url etc)
        .pipe(map(data => {
            // Process the data and saving the token
            result = true; // or false as appropriate
        }), map( data => result));
}

Это достигает моей цели обработки всех токенов и т. Д. Внутри моего сервиса и возврата Observable<boolean> компоненту входа в систему.

Если у кого-то есть лучшее решение, я бы хотел услышать его. Это похоже на взломать меня. Это не элегантно.

Я лег спать сразу после публикации этого ответа, и как только моя голова коснулась подушки, мне пришло правильное решение. Я только что реализовал это, и он отлично работает. Это настолько очевидно, что я чувствую себя немного смешно, что мне понадобилось так много времени, чтобы понять это. Улучшенное решение ниже: 

    login(params): Observable<boolean> {
    var result: boolean;
    return this.http.put<any>(url etc)
        .pipe(map(data => this.transformData(data)));
}

private transformData(data): boolean {
    // Process the data and store tokens etc
    return true; // or false as appropriate
}

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

0 голосов
/ 28 августа 2018

Обычно вы возвращаете наблюдаемое из вашего сервиса, чтобы ваш компонент мог на него подписаться. 

// indicate a loading action e.g. spinner     
this.authenticationService.login(user,password).subscribe(loggedin => if(loggedin) {... do something} else { do somethingelse...)

И ваша функция входа в систему, вероятно, будет выглядеть так: 

login(user, password):Observable<boolean>{
    return http.post(parameters).map(result => result.loggedin)
}
...