组件或服务上的本地角度存储？

Question

我正在使用Angular8，并尝试制作一个登录表单。

我有一个身份验证服务，我正在使用发布请求来发送登录信息

auth.service.ts

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

而且我有一个login.component，它将获取formdata并将其发送到服务

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

您可以在服务中声明一个方法来设置令牌，并在登录成功后调用它。不确定安全性，但创建用于执行此类工作的storageService可以很好地抽象化，并且将来使您的调试工作变得更轻松。

Answer 2

我个人更喜欢仅在服务中使用本地存储，因为这可以确保我仅通过服务更改值。这往往会使您的代码更具可维护性，因为您只通过此服务而不是本地存储与令牌交互。

将令牌存储在localStorage中足够安全。我个人更喜欢使用相同的userService读取令牌，然后在应用程序处于活动状态时保留在内存中。您不能只使用服务，因为这会在重新加载页面时丢失令牌。

如果您想获得有关如何实现此功能的示例，请参考我过去使用过的方法。