如何实现记住我的功能？答案

【问题标题】：How to implement a remember me function?如何实现记住我的功能？
【发布时间】：2018-09-05 15:10:01
【问题描述】：

我正在使用 node js 后端做一个 Angular 4 应用程序。我做了登录表单，一切都很好我想实现“记住我”的功能。

这是我的登录服务：

import { Injectable } from '@angular/core';

@Injectable()
export class loginService{
  rememberMe: boolean;
  constructor() { }

login(credentials) {
  sessionStorage.setItem('Name', credentials.firstName);
  sessionStorage.setItem('token', credentials.token);
}

getCostumer() {
  const user = {
    Name:  sessionStorage.getItem('firstName'),
    token: sessionStorage.getItem('token')
}

这是组件：

constructor(private signInService: SignInService, private router: Router, 
public dialog: MatDialog, private authService: AuthService) { }

ngOnInit() { }

  login(costumer) {
     this.loginService.login(costumer).subscribe((data) => {
       this.authService.login(data);
       this.router.navigate(['home']);
       this.dialog.closeAll();
      }, err => {
       this.message = err._body;
       console.log(this.message);
     });
  }
}

【问题讨论】：

你有什么错误吗？你尝试了什么？
是的，我想你已经通过设置sessionStorage.setItem('Name', credentials.firstName); sessionStorage.setItem('token', credentials.token);解决了你的问题
您的 loginService 类没有 signIn 方法，您也从未在构造函数中声明该方法。您发布的代码完全没有意义
这不是问题，当我单击名为“记住我”的登录表单上的复选按钮并在打开新的 googlechrome 窗口后登录时，我发现我自己已连接或关闭导航器并重新打开它我发现我自己连接了

标签： javascript angular typescript local-storage angular2-template

【解决方案1】：

使用localStorage 而不是sessionStorage

在你的情况下，你可以这样做：

if (isRemberMeChecked) {
    ...
    localStorage.setItem('Name', credentials.firstName);
    localStorage.setItem('token', credentials.token);
    ...
} else {
    ...
    sessionStorage.setItem('Name', credentials.firstName);
    sessionStorage.setItem('token', credentials.token);
    ...
}

如果您想在全球范围内获得isRemberMeChecked 值，您可以使用angular service

【讨论】：

【解决方案2】：

您在此处要做的是将 localStorage 用于 rememberMe 和 credentials.firstName。您可以存储在 sessionStorage 中的 credentials.token：

login(credentials) {
  localStorage.removeItem('Name');
  localStorage.removeItem('RememberMe');
  sessionStorage.setItem('token', credentials.token);
  if(rememberMe){
    localStorage.setItem('Name', credentials.firstName);
    localStorage.setItem('RememberMe', JSON.stringify(this.rememberMe));
  }
}

重新加载后，它将获取 RememberMe 和 Name：

if(JSON.parse(localStorage.getItem('RememberMe')) !== null)
{
  this.name = localStorage.getItem('Name');
  this.rememberMe = JSON.parse(localStorage.getItem('RememberMe'));
}

【讨论】：

以及我将如何在 html 方面做以及服务将如何知道记住我的价值，因为我在另一个文件中有服务
我把第二个代码放在哪里了？在功能登录？
您在哪里重新加载页面。我会说 ngOnInit()
如果你做对了，你就不必对服务做任何事情。该服务应该在您的 sumbit 按钮后面以登录用户。 rememberMe 应该只为登录页面设置和获取名称值。
您将 setter 放在登录组件中的订阅之后而不是您的服务中？