如何正确拦截REQUEST

Question

我已经设置了一个拦截器 class 以将 jwt 令牌添加到请求 headers 但请求仍然没有令牌。

我已经设置了 class 并在调用 request.clone 之前放置了一个 console.log 以查看我的令牌是否真的存在。但它似乎没有传递给请求：

export class JwtInterceptor implements HttpInterceptor {
        constructor(private authenticationService: AuthenticationService) { }

        intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
                // add authorization header with jwt token if available
                let currentUser = this.authenticationService.currentUserValue;
                let currentToken = this.authenticationService.currentTokenValue;

                if (currentUser && currentToken) {
                    console.log(currentToken);

                    const cloned = request.clone({
                                setHeaders: {
                                        Authorization: `Bearer ${currentToken}`
                                }
                        });
                }

                return next.handle(request);
        }
}

console.log 显示令牌。

我的服务功能：

export class UserService {
        constructor(private http: HttpClient) { }

        getAll() {
                return this.http.get<User[]>(`${environment.apiUrl}/users`);
        }
}

登录成功后发出请求。我重定向到主页，ngInit 调用了这个方法。

我希望使用 header 中的令牌进行请求，但它没有通过（对不起我的英语）。

有人可以帮忙吗？

Answer 1

你创建了 cloned 但什么也没做。 return它。

intercept(request: HttpRequest<any>, next: HttpHandler) {
    // ... yada yada yada ...
      if ... {
        return request.clone({ setHeaders: { Authorization: `Bearer ${currentToken}` } });
      }
      return next.handle(request);   
}

如何正确拦截REQUEST

How to intercept REQUEST correctly

angular-http-interceptors

angular