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

【问题标题】：angular local storage on component or service?组件或服务上的角度本地存储？
【发布时间】：2020-01-26 00:44:45
【问题描述】：

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

我有一个 auth.service，我使用 post 请求发送登录信息

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

我的问题是，在组件中、订阅中、获得成功的地方使用本地存储是否可行，还是应该在服务中使用？

如果它在服务中更安全，我怎样才能让它只在登录成功时设置令牌？

谢谢

【问题讨论】：

标签： angular typescript angular-services angular-components angular8

【解决方案1】：

是的，最好在服务中处理令牌

在你的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)
    )
}

我希望这会有所帮助

【讨论】：

this.authService.isLoggedIn = true; 应该是 this.isLoggedIn = true;，因为它正在 authService 上使用。不过很好的例子。我创建了一个不同的服务来处理令牌，并从我的组件传递参数。谢谢

【解决方案2】：

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

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

如果您想要一个关于如何实现它的示例，我已经制作了一个 gist 我过去使用的内容。

【讨论】：

感谢上传，这对通读非常有用。是否也可以看到 apiService 和 jwtService 的 sn-p 以便我更好地理解功能？我假设您的 apiService 将类似于我的 authService，但我不明白 jwtService 的用途是什么？我正在考虑让我的登录更加安全，因为我知道在 localStorage 中设置它是不安全的。谢谢你，这是一个很大的帮助

【解决方案3】：

您可以在服务中声明一个方法来设置令牌并在登录成功时调用它。不确定安全性，但为执行这些类型的工作创建一个 storageService 是一个很好的抽象，它将使您在将来调试时更轻松。

【讨论】：