Angular Academy · Oppitunti

Autentikointitunnisteiden lisääminen

Liittäkää tunnisteet lähteviin pyyntöihin

Oppitunti 2/413 vaihetta

Autentikointitunnisteiden lisääminen on ilmainen Angular Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu Angular Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Angular Academy-kurssilla on yhteensä 4 oppituntia.

Miksi auth kannattaa toteuttaa interceptorilla

Useimmat API:t edellyttävät Authorization-otsaketta jokaisessa pyynnössä. Sen sijaan että lisäisitte sen jokaiseen kutsuun erikseen, interceptor lisää sen automaattisesti kaikkiin lähteviin pyyntöihin.

Kloonaaminen otsakkeen lisäämistä varten

Koska pyynnöt ovat muuttumattomia, kloonatkaa pyyntö setHeaders-asetuksella liittääksenne siihen tunnisteen.

export const authInterceptor: HttpInterceptorFn = (req, next) => {
  const token = inject(AuthService).getToken();
  const authReq = req.clone({
    setHeaders: { Authorization: 'Bearer ' + token }
  });
  return next(authReq);
};

Tunnisteen lukeminen palvelusta

Injektoikaa auth-/token-palvelu nykyisen tunnisteen hakemista varten. Signaalin tai BehaviorSubjectin käyttäminen sen sisällä pitää arvon ajan tasalla.

export class AuthService {
  private token = signal<string | null>(null);
  getToken() { return this.token(); }
  setToken(t: string) { this.token.set(t); }
}

Ohittaminen ilman tunnistetta

Jos käyttäjä ei ole kirjautunut sisään, välittäkää alkuperäinen pyyntö eteenpäin muuttamattomana.

export const authInterceptor: HttpInterceptorFn = (req, next) => {
  const token = inject(AuthService).getToken();
  if (!token) return next(req);
  return next(req.clone({
    setHeaders: { Authorization: 'Bearer ' + token }
  }));
};

Liittäminen vain omaan API:in

Älkää vuotako tunnistetta kolmansien osapuolten URL-osoitteisiin. Tarkistakaa, että pyynnön URL-osoite kuuluu taustajärjestelmällenne.

const isApi = req.url.startsWith(environment.apiUrl);
if (!isApi || !token) return next(req);
return next(req.clone({
  setHeaders: { Authorization: 'Bearer ' + token }
}));

setHeaders ja headers.set

setHeaders-asetus clonessa on tiivis tapa. Voitte myös käyttää req.headers.set(...)-kutsua ja välittää otsakkeet { headers }-syntaksilla. setHeaders yhdistää otsakkeet, eikä korvaa niitä kaikkia.

const headers = req.headers.set('Authorization', 'Bearer ' + token);
return next(req.clone({ headers }));

Useiden otsakkeiden lisääminen

Liittäkää useita otsakkeita kerralla yhdellä kloonauksella.

return next(req.clone({
  setHeaders: {
    Authorization: 'Bearer ' + token,
    'X-Client': 'web',
    'Accept-Language': lang
  }
}));

withCredentials evästeitä varten

Jos todennus käyttää tunnisteiden sijaan HttpOnly-evästeitä, asettakaa withCredentials, jotta selain lähettää ne eri alkuperien välillä.

return next(req.clone({ withCredentials: true }));

Vanhentuneen tunnisteen päivittäminen

Tunnisteen päivityksessä interceptor voi siepata 401-virheen, pyytää uuden tunnisteen ja yrittää sitten alkuperäistä pyyntöä uudelleen — kyseessä on edistyneempi malli, jota käsitellään virheenkäsittelyn yhteydessä.

Interceptorin pitäminen puhtaana

Interceptorin tulisi lukea tunniste ja kloonata pyyntö — välttäkää navigoinnin tai raskaan logiikan käynnistämistä täällä. Pitäkää vastuut rajattuina, jotta pyyntöputki säilyy ennakoitavana.

Auth-interceptorin rekisteröinti

Sijoittakaa se ketjun alkuun, jotta otsake on mukana ennen lokituksen tai muiden interceptoreiden suorittamista.

provideHttpClient(
  withInterceptors([authInterceptor, loggingInterceptor])
)

Pikatesti

Testatkaa, kuinka hyvin ymmärrätte auth-otsakkeiden lisäämistä.

Vastaa interaktiivisessa oppitunnissa

Kertaus: auth-otsakkeiden lisääminen

Auth-interceptor liittää tunnisteen lähteviin pyyntöihin.

Kloonatkaa pyyntö asetuksella setHeaders: { Authorization: ... }.
Ohittakaa pyyntö ilman tunnistetta ja rajoittakaa käsittely oman API:n URL-osoitteisiin.
Käyttäkää evästeisiin perustuvassa todennuksessa withCredentials-asetusta.

Seuraavaksi: virheiden käsittely keskitetysti.

Aloita maksutta

Opi HTML tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 38
Oppitunnit: 144

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Autentikointitunnisteiden lisääminen” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Angular Academy-oppimispolun 3 oppituntia, myös oppitunnin “Autentikointitunnisteiden lisääminen”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Angular Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Autentikointitunnisteiden lisääminen”?

Liittäkää tunnisteet lähteviin pyyntöihin Harjoittelet Angular Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Angular Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Angular Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/4.

Kuinka kauan ”Autentikointitunnisteiden lisääminen”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä Angular Academy-oppitunnilla?

Kyllä. Jokainen Angular Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

← Takaisin: Angular Academy