Question

我有一个使用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;
}

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

Answer 2

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

存储在localstorage中的代码。

 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（）请求上设置JWT Bearer令牌

2 个答案: