угловое локальное хранилище на компоненте или услуге?

Question

Я использую Angular8 и пытаюсь создать форму для входа.

У меня есть auth.service, где я использую почтовый запрос для отправки информации для входа в систему

auth.service.ts

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

И у меня есть login.component, который получит данные формы и отправит их в службу

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

У меня такой вопрос?жизнеспособно иметь локальное хранилище в компоненте, в подписке, где оно получает успех, или оно должно быть в сервисе?

Если это более безопасно в сервисе, как я могу установить токен только при успешном входе в систему?

Спасибо

Answer 1

Лично я предпочитаю использовать локальное хранилище только в сервисах, так как оно гарантирует, что я меняю значения только через свои сервисы.Это делает ваш код более удобным, так как вы взаимодействуете только с токеном через этот сервис, а не с локальным хранилищем.

Это достаточно безопасно для хранения токена в localStorage.Лично я предпочитаю читать токен с тем же userService, чтобы хранить его в памяти, когда приложение активно.Вы не можете использовать только службу, так как это приведет к потере токена при перезагрузке страницы.

Если вам нужен пример того, как реализовать это, я сделал гист того, что у меня естьиспользуется в прошлом.

Answer 2

Да, лучше использовать токен в службе

. В вашем auth.service.ts добавьте метод

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

и в свой 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)
)
}

Надеюсь, это поможет

Answer 3

Вы можете объявить метод в вашем сервисе для установки токена и вызова его при успешном входе в систему.Не уверен насчет безопасности, но создание StorageService для выполнения таких работ делает хорошую абстракцию и облегчит вашу жизнь при отладке в будущем.