如何在 Angular 8 中将登录用户数据存储在本地存储中

Question

我想将登录用户数据存储在角度8的本地存储中，并获取该用户的数据。在此，我没有使用 Firebase 身份验证服务。

这是我的登录代码

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")
      }
    }
  )
}

Answer 1

如果您只是想将登录用户存储在本地存储中，那么您应该使用 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;
    }

登录.组件.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;
                });
    }

认证.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');
    }

更详细地查看以下网址： https://stackblitz.com/edit/angular-6-registration-login-example ?file=app%2F_services%2Fauthentication.service.ts

我希望这就是您正在寻找的！