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

Question

我正在使用 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)
    )
  }

我的问题是，在组件中、在订阅中成功地使用 localstorage 是否可行，还是应该在服务中？

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

谢谢

Answer 1

是的，最好在服务中使用 Handel token

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

我希望这会有所帮助