typescript - angular lokal lagring på komponent eller tjänst?

Jag använder Angular8 och försöker skapa ett inloggningsformulär.

Jag har en auth.service där jag använder en postförfrågan för att skicka inloggningsinformationen

auth.service.ts

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

Och jag har en login.component som kommer att hämta formdata och skicka det till tjänsten

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

Min fråga är om det är genomförbart att ha localStorage i komponenten, i subscribe, där det blir en framgång, eller bör det vara i tjänsten?

Om det är säkrare i tjänsten, hur kan jag få det att bara ställa in token vid lyckad inloggning?

Tack

Svar #1

Ja, det är bättre att hantera token i en tjänst

Lägg till en metod i din auth.service.ts

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

och i din 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)
    )
}

Jag hoppas att detta hjälper

Svar #2

Jag föredrar personligen att använda localstorage endast i tjänster eftersom det säkerställer att jag endast ändrar värden genom mina tjänster. Detta tenderar att göra din kod mer underhållbar eftersom du endast interagerar med din token genom denna tjänst istället för din localstorage.

Det är tillräckligt säkert att lagra token i localStorage. Jag föredrar personligen att sedan läsa token med samma userService för att sedan behålla den i minnet när applikationen är aktiv. Du kan inte bara använda en tjänst eftersom detta skulle förlora token vid en sidladdning.

Om du vill ha ett exempel på hur man implementerar detta har jag gjort en gist av vad jag har använt tidigare.