Question

我已经为此努力了好几个小时，我希望有人可以帮助我并指导我。因此，我正在开发Angular 7应用程序身份验证模块。要求之一就是开发一个HTTP拦截器，以添加一个Authorization（JWT）令牌并处理所有错误消息。

我正在使用NPM软件包来处理令牌的本地存储。该程序包使用set和get方法存储并返回一个Promise，而不是令牌的实际值。

现在，我的问题出在拦截器函数中，如下所示。我试图评论我被卡住的地方。

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，但是却收到一个红色的讨厌的错误，说TS1055: Type 'typeof Observable' is not a valid async function return type in ES5/ES3 because it does not refer to a Promise-compatible constructor value. Types of parameters 'subscribe' and 'executor' are incompatible.。

我们将为解决此问题提供帮助。

谢谢！

Answer 1

要将异步处理合并到拦截器中，您希望将对诺言的承诺提升为可观察者，然后将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的接收承诺结果的函数中进行操作

Answer 2

尝试直接从本地存储中获取令牌。为此，当您获得令牌时，使用令牌服务方法将该令牌存储到本地存储中。

尝试以下代码：

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

使用Promise从HTTP拦截器返回请求对象

2 个答案: