Использование обещания вернуть объект запроса от перехватчика HTTP - PullRequest
Новая
       27

Использование обещания вернуть объект запроса от перехватчика HTTP

0 голосов
/ 22 февраля 2019

Я часами чесал в этом голову, и я надеюсь, что кто-то может мне помочь и направить меня.Итак, я разрабатываю модуль аутентификации приложений Angular 7.Одним из требований является разработка перехватчика HTTP для добавления токена авторизации (JWT), а также для обработки всех сообщений об ошибках.

Я использую пакет NPM для обработки локального хранилища токенов.Этот пакет использует методы set и get для хранения и возвращает обещание, а не фактическое значение токена.

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

intercept(request: HttpRequest<any>, next: HttpHandler): 
    Observable<HttpEvent<any>> {

    // Trying to get the token here but this returns a promise
    // this.token is a service for managing storage and retrieving of tokens
    const token = this.token.getToken();

    // If token is got, set it in the header
    // But when i console log, i see [object promise] other than the token
    if (token) {
        request = request.clone({
            headers: request.headers.set('Authorization', 'Bearer ' + token)
        });
    }

    return next.handle(request).pipe(catchError(err => {
        // Logs out the user if 401 error
        if (err.status === 401) {
            this.token.remove()
                .then(() => {
                    this.auth.changeAuthStatus(false);
                    this.router.navigateByUrl('/login');
                });
        }

        // Returns the error message for the user to see
        // for example in an alert
        const error = err.error.message || err.statusText;
        return throwError(error);
    }));
}

Надеюсь, я хорошо объяснил эту проблему.Я пытался использовать async перед функцией перехватчика, но я получил красную неприятную ошибку: 1009 *.

Буду признателен за любую помощь в устранении этой проблемы.

Спасибо!

Ответы [ 2 ]

0 голосов
/ 22 февраля 2019

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

Попробуйте следующий код:

token.service.ts 

setToken(token) {
    localStorage.setItem('app-token', JSON.stringify(token));
}

getToken() {
    return JSON.parse(localStorage.getItem('app-token'));
}

Код перехватчика 

intercept(request: HttpRequest<any>, next: HttpHandler): 
Observable<HttpEvent<any>> {

//This token is retrieved from local storage
const token = this.token.getToken();

// If token is got, set it in the header
// But when i console log, i see [object promise] other than the token
if (token) {
    request = request.clone({
        headers: request.headers.set('Authorization', 'Bearer ' + token)
    });
}

return next.handle(request).pipe(catchError(err => {
    // Logs out the user if 401 error
    if (err.status === 401) {
        this.token.remove()
            .then(() => {
                this.auth.changeAuthStatus(false);
                this.router.navigateByUrl('/login');
            });
    }

    // Returns the error message for the user to see
    // for example in an alert
    const error = err.error.message || err.statusText;
    return throwError(error);
}));
}
0 голосов
/ 22 февраля 2019

чтобы включить асинхронную обработку в ваш перехватчик, вы хотите рекламировать свое обещание для наблюдаемой, и switchMap ваши наблюдаемые вместе, возвращая правильный запрос: 

import { from as observableFrom } from "rxjs";
import { switchMap } from "rxjs/operators";

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return observableFrom(this.token.getToken()).pipe(
        switchMap(token => {

            // do something with your promise-returned token here

            return next.handle(request).pipe(catchError(err => {
                // Logs out the user if 401 error
                if (err.status === 401) {
                    this.token.remove()
                        .then(() => {
                            this.auth.changeAuthStatus(false);
                            this.router.navigateByUrl('/login');
                        });
                }

                // Returns the error message for the user to see
                // for example in an alert
                const error = err.error.message || err.statusText;
                return throwError(error);
            }));
        })
    );
}

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

1) продвиньте свое обещание к наблюдаемому с from

2) соедините ваши наблюдаемые с switchMap

я заметил, что вы на самом деле не используете токен, возвращенный в вашем примере, вы сделали бы это в функции внутри switchMap, которая получает результат обещания

...