angular - Odosielanie hlavičky autorizácie pre zdroj obrázkov na vzdialený server v stránke Ionic

Mám Ionic aplikáciu, ktorá získava údaje z vzdialeného servera a zobrazuje ich na stránke Ionic HTML.

Vzdialená URL vyzerá takto:

http://foo.com/api/content/1

Toto mi poskytne JSON objekt s "content" a bude ďalej použitý na HTML stránke aplikácie Ionic.

Používa sa to takto na html stránke v rámci aplikácie Ionic:

<div class="article-desc">
  <p [innerHtml]="myObject?.Body"></p>
</div>

"myObject" je JSON objekt odpovede prijatej zo servera.

Pole „Telo“ obsahuje HTML, ktoré sa má zobraziť v odseku. Toto pole „HTML“ sa vracia zo servera iba spolu s celým objektom „obsah“.

Pole „Body“ môže mať obsah ako tento:

<p>blah blah <img src="http://foo.com/image/1"/> blah blah <img src="http://foo.com/image/2"/>blah blah blah </p>

Z vyššie uvedeného príkladu môžete vidieť, že obrázky sú v tom HTML.

Nemám problém vykresliť html z tohto poľa na stránku Ionic.

Mám tu jeden problém, že moje obrázky sa tam nezobrazujú.

Tu je dôvod..

Moja aplikácia je uzamknutá pre hostí, takže pre každý dopyt musím odoslať hlavičku autorizácie, aby som ho overil, a v tomto prípade sa všetky obrázky nedajú zobraziť, pretože každý požiadavok na obrázok bude serverom považovaný za požiadavok od hosťa.

Môžete navrhnúť bežné miesto, cez ktoré by všetky moje obrázky a iné zdroje, ako sú v HTML, mali prechádzať a ktoré by mohlo odosielať autorizačný hlavičkový riadok spolu s nimi na server.

Už mám autorizačný token v položke lokálneho úložiska.

Mojím cieľom je odoslať hlavičku autorizácie každému externému zdroju (obrázku tu) prítomnému v poli Body, keď sa vykreslí v aplikácii Ionic.

Odpoveď č. 1

1) Vytvorte interceptor, ktorý nastaví hlavičku autorizácie

import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {

    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

        request = request.clone({
            setHeaders: {
                Authorization: `Bearer <your token>`
            }
        });

        return next.handle(request);
    }
}

Namiesto <your token> by ste mali do tohto interceptora vložiť váš AuthService, napríklad this.authService.getToken(), ktorý načíta token z lokálneho úložiska.

2) Implementujte „bezpečný“ pipe, ktorý získa obrázok ako blob a vytvorí objektovú URL tohoto bloba, ktorú je možné použiť v atribúte src

import { Pipe, PipeTransform } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
import { Observable } from 'rxjs/Observable';

@Pipe({
    name: 'secure'
})
export class SecurePipe implements PipeTransform {

    constructor(private http: HttpClient, private sanitizer: DomSanitizer) { }

    transform(url): Observable<SafeUrl> {
        return this.http
            .get(url, { responseType: 'blob' })
            .map(val => this.sanitizer.bypassSecurityTrustUrl(URL.createObjectURL(val)));
    }

}

3) Použi to

<img [attr.src]="'your link' | secure | async" />

Odpoveď č. 2

1. možnosť: Hľadajte „URL podpisovanie“

Myšlienka je taká, že keď použijete <img src="http://foo.com/image/1">, nie je spôsob, ako odoslať hlavičky autorizácie. Namiesto toho teda urobíte POST požiadavku na svoj backend, aby ste požiadali o dočasný verejný odkaz na obrázok, a tento odkaz nastavíte ako zdroj obrázka.

Tu je príklad toku

  1. Potrebujem zobraziť "http://foo.com/image/1"

  2. Z prehliadača odošlite POST požiadavku na backend, dajte im vedieť, že ste autorizovaný klient (zahrňte hlavičku autorizácie) a požiadajte o dočasnú URL, ktorá zobrazí obrázok verejne

  3. Z backendu vygenerujte podpísanú URL, ktorá je platná len obmedzený čas a na zobrazenie obrázka nevyžaduje hlavičky autorizácie.

  4. Použite dočasnú podpísanú URL, ktorú ste práve dostali, ako zdroj (src) značky img.

2. možnosť: Stiahnite obrázok a použite blob URL

Odpovede na túto otázku vám o tom povedia: Vynútiť HTTP interceptor v dynamickom dopyte ngSrc

Súvisiace články