web-dev-qa-db-ja.com

ログインユーザーデータをangular 8のローカルストレージに保存する方法

ログインユーザーのデータをangular 8.のローカルストレージに保存し、そのユーザーのデータを取得します。ここでは、Firebase authサービスを使用していません。

これが私のログインコードです

login(empId: string, password: string){
  return this.af.database.ref('Users/' +empId).once('value').then(
    snap =>{
      var userPassword = (snap.val() && snap.val().password)
      if(password == userPassword){
       // this.router.navigate(['dashboard']);
      }
      else{
        console.log("Incorrect Password")
      }
    }
  )
}
angularfirebase-realtime-databaseangular8
1
Shubham Patil

ログインユーザーをlocalstorageに保存するだけの場合は、localStorage.setItem（key、value）を使用する必要があります。そして、ユーザーログインを角度で設定するには、canActivateを使用する必要があります。これは、次のようにユーザーログインに基づいてルートをアクティブ化できるかどうかを決定します：auth.guard.ts

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
        if (localStorage.getItem('currentUser')) {
            // logged in so return true
            return true;
        }

        // not logged in so redirect to login page with the return url
        this.router.navigate(['/login'], { queryParams: { returnUrl: state.url }});
        return false;
    }

login.component.ts

onSubmit() {
        this.submitted = true;

        // stop here if form is invalid
        if (this.loginForm.invalid) {
            return;
        }

        this.loading = true;
        this.authenticationService.login(this.f.username.value, this.f.password.value)
            .pipe(first())
            .subscribe(
                data => {
                    this.router.navigate([this.returnUrl]);
                },
                error => {
                    this.alertService.error(error);
                    this.loading = false;
                });
    }

authentication.service.ts

login(username: string, password: string) {
        return this.http.post<any>(`/users/authenticate`, { username: username, password: password })
            .pipe(map(user => {
                // login successful if there's a jwt token in the response
                if (user && user.token) {
                    // store user details and jwt token in local storage to keep user logged in between page refreshes
                    localStorage.setItem('currentUser', JSON.stringify(user));
                }

                return user;
            }));
    }

    logout() {
        // remove user from local storage to log user out
        localStorage.removeItem('currentUser');
    }

以下のURLを詳しく見てください： https://stackblitz.com/edit/angular-6-registration-login-example?file=app%2F_services%2Fauthentication.service.ts

これがあなたが探しているものであることを願っています!!

1
Swati Gupta

あなたの質問にはもっと多くのことがあるように感じますが、ブラウザのローカルストレージに値を保存するだけの場合は、かなり単純です。

localStorage.setItem(key, value);
0
Rahul Wasnik