web-dev-qa-db-ja.com

Angular 4、覚えて機能

私は、ノードjsバックエンドでangualar 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);
     });
  }
}
4
Mat

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を使用できます

9
Vala Khosravi

ここでは、localStoragerememberMeおよびcredentials.firstNameに使用します。 credentials.tokensessionStorageに保存できます:

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'));
}
2
Swoox