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

Question

我有一个 API，它使用 JWT 进行客户端身份验证，这对正常请求运行良好，但我找不到任何方法来控制将要发送的 headers使用 HTMLMediaElement 加载音频文件进行播放时的请求。

我将 Angular 4 与 Typescript 一起使用，这是我用来加载 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;
}

Answer 1

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

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

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

现在您需要在每个请求的 header 中发送。

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

Answer 2

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

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

这篇博客 post 描述了如何实现这一点：Angular 身份验证：使用 Http 客户端和 Http 拦截器

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

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

How can I set a JWT Bearer token on HTMLMediaElement .load() request

html5-video

html5-audio

jwt

typescript

angular