TypeScript - Angular lokaler Speicher in Komponente oder Service?

Ich verwende Angular8 und versuche, ein Login-Formular zu erstellen.

Ich habe einen Authentifizierungsdienst, bei dem ich eine POST-Anfrage verwende, um die Login-Daten zu senden

auth.service.ts

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

Und ich habe eine login.component, die die Formulardaten erhält und sie an den Dienst sendet

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

Meine Frage ist, ist es sinnvoll, den LocalStorage in der Komponente, im Subscribe, wo ein Erfolg eintritt, zu haben, oder sollte er im Service sein?

Wenn es im Dienst sicherer ist, wie kann ich es nur bei erfolgreichem Login den Token setzen lassen?

Danke

Antwort #1

Ja, es ist besser, ein Token in einem Dienst zu verwalten

Fügen Sie in Ihrer auth.service.ts eine Methode hinzu

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

und in deiner 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)
    )
}

Ich hoffe, das wird helfen

Antwort #2

Ich persönlich ziehe es vor, das Localstorage nur in Services zu verwenden, da es sicherstellt, dass ich Werte nur über meine Services ändere. Dies macht den Code tendenziell wartungsfreundlicher, da man nur über diesen Service mit dem Token interagiert, anstatt direkt mit dem Localstorage.

Es ist sicher genug, das Token im localStorage zu speichern. Ich bevorzuge es persönlich, das Token dann mit demselben userService auszulesen, um es im Speicher zu behalten, solange die Anwendung aktiv ist. Man kann nicht nur einen Service verwenden, da das Token bei einem Seiten-Reload verloren gehen würde.

Wenn Sie ein Beispiel dafür möchten, wie man dies implementiert, habe ich ein Gist von dem erstellt, was ich in der Vergangenheit verwendet habe.