typescript - angular lokalna pohrana na komponenti ili servisu?

Koristim Angular8 i pokušavam napraviti obrazac za prijavu.

Imam auth.service gdje koristim POST zahtjev za slanje podataka za prijavu

auth.service.ts

login(form: FormData) {
    return this.httpClient.post<UserLogin>(`${this.AUTH_SERVER}/api/function.php`, form);
}

I ja imam login.component koji će dobiti podatke iz forme i poslati ih servisu

login.component.ts

login() {
    const formData = new FormData();
    formData.append('action', this.loginForm.value.action);
    formData.append('email', this.loginForm.value.email);
    formData.append('password', this.loginForm.value.password);

    this.authService.login(formData).subscribe(
      (res) => {
        this.authService.isLoggedIn = true;
        localStorage.setItem('ACCESS_TOKEN', "isLoggedIn");
        this.router.navigateByUrl('/admin');
      },
      (err) => console.log('err', err)
    )
  }

Moje pitanje je, je li izvedivo imati localstorage u komponenti, u subscribeu, gdje se dobiva uspjeh, ili bi to trebalo biti u servisu?

Ako je sigurnije u usluzi, kako mogu postaviti token samo u slučaju uspješnog prijavljivanja?

Hvala

Odgovor #1

Da, bolje je rukovati tokenom u servisu

U vaš auth.service.ts dodajte metodu

setToken(token) {
    this.authService.isLoggedIn = true;
    localStorage.setItem('ACCESS_TOKEN', token);
}

i u vašem login.component.ts

login() {
    const formData = new FormData();
    formData.append('action', this.loginForm.value.action);
    formData.append('email', this.loginForm.value.email);
    formData.append('password', this.loginForm.value.password);

    this.authService.login(formData).subscribe(
        (res) => {
            this.authService.setToken(yourtoken);
            this.router.navigateByUrl('/admin');
        },
        (err) => console.log('err', err)
    )
}

Nadam se da će ovo pomoći

Odgovor #2

Osobno preferiram koristiti localstorage samo u servisima jer to osigurava da vrijednosti mijenjam samo preko svojih servisa. To obično čini vaš kod održivijim jer komunicirate sa svojim tokenom samo preko tog servisa umjesto direktno preko localstoragea.

Dovoljno je sigurno pohraniti token u localStorage. Osobno radije potom čitam token s istim userService kako bih ga zadržao u memoriji dok je aplikacija aktivna. Ne možete koristiti samo servis jer biste u slučaju ponovnog učitavanja stranice izgubili token.

Ako želite primjer kako ovo implementirati, napravio sam gist onoga što sam koristio u prošlosti.