如何在 HTMLMediaElement .load() 请求上设置 JWT Bearer 令牌答案

【问题标题】：How can I set a JWT Bearer token on HTMLMediaElement .load() request如何在 HTMLMediaElement .load() 请求上设置 JWT Bearer 令牌
【发布时间】：2017-11-04 10:00:41
【问题描述】：

我有一个使用 JWT 进行客户端身份验证的 API，这对于正常请求来说效果很好，但是当我使用 HTMLMediaElement 加载时，我找不到任何方法来控制将随请求一起发送的标头用于播放的音频文件。

我正在使用带有 Typescript 的 Angular 4，这是我用来加载我的 URL 的那种代码，如果我禁用 API 上的访问控制，它可以正常工作：

public Load(url: string): number{
    if (!this.audioElement) {
        this.audioElement = new Audio();
        this.audioElement.autoplay = false;
        this.audioElement.preload = 'auto';
    }
    this.audioElement.src = url;
    this.audioElement.load();
    this.audioElement.pause();
    return this.audioElement.duration;
}

【问题讨论】：

标签： angular typescript html5-video jwt html5-audio

【解决方案1】：

我有一个类似的要求，我需要通过媒体播放器从 ASP.net WebApi 流式传输经过身份验证的音频。

您可以使用 Angular 4.3 引入的 HttpInterceptor 优雅地实现这一点。这使您能够拦截 http 请求并添加不记名令牌：

这篇博文描述了如何实现这一点：Angular Authentication: Using the Http Client and Http Interceptors

   // src/app/auth/token.interceptor.ts
import { Injectable } from '@angular/core';
import {
  HttpRequest,
  HttpHandler,
  HttpEvent,
  HttpInterceptor
} from '@angular/common/http';
import { AuthService } from './auth/auth.service';
import { Observable } from 'rxjs/Observable';
@Injectable()
export class TokenInterceptor implements HttpInterceptor {
  constructor(public auth: AuthService) {}
  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    request = request.clone({
      setHeaders: {
        Authorization: `Bearer ${this.auth.getToken()}`
      }
    });
    return next.handle(request);
  }
}

【讨论】：

【解决方案2】：

登录成功后，您将获得令牌。然后您需要将该令牌保存在 localstorage 或 sessionstaorage 或 cookie 或 store ngrx/store 中。

要存储在本地存储中的代码。

 onSubmit() {
this.loginService.sendCredentials(this.model).subscribe(
  data => {
    localStorage.setItem("token", JSON.parse(JSON.stringify(data))._body);

现在您需要发送每个请求的标头。

@Injectable()
export class UserService {
  constructor (private http:Http) {}

   getUserByName(username: string) {
   let url="http://localhost:8088/rest/user/userName";
   let header=new Headers({'Content-Type': 'application/json', 
   'Authorization': 'Bearer '+localStorage.getItem("token")});

   return this.http.post(url, username, {headers: header});
 }
}

【讨论】：

我发出正常请求没有问题（如我的问题中所述），但仅在尝试使用 HTMLMediaElement.load() 方法时，该方法似乎没有提供任何设置自定义标头的方法。