Question

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

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

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

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

在您的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 2

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

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

如果您想了解如何实现此目的的示例，请参考我过去使用过的内容gist。

Answer 3

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

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

3 个答案: