刷新页面后 currentUser 为空答案

【问题标题】：currentUser is null after refreshing page刷新页面后 currentUser 为空
【发布时间】：2019-11-20 19:19:59
【问题描述】：

我有一个登录组件、一个服务和一个存储助手。登录方法工作正常，直到我刷新主页（这里我需要用户的数据），因为我正在注入一个空服务。因此，为了解决这个问题，我在 app.component 中创建了一个方法，该方法使用保存到 localStorage 的令牌设置 currentUser。

我的问题是刷新页面后currentUser为null，我认为是因为没有保存令牌。

如何解决？

app.component.ts

 getUserDetails() {
    this.accountService.getUserDetails().subscribe(res => {
      this.userService.setCurrentUser(<User>res);
    }, error => {
      StorageHelper.killSession();
    });
  }

  login(credentials) {
    delete credentials.rememberMe;
    return this.apiService.post(`${this.resourceUrl}/login`, credentials);
  }

login() {
    this.accountService.login(this.authForm.value).subscribe(res => {
      StorageHelper.saveToken((<User>res).token);
      this.userService.setCurrentUser((<User>res));
      this.router.navigateByUrl(this.getReturnUrl());
    }, error => {
    });
 }

storagehelper.ts

private static readonly tokenKey: string = "VendorJwtToken";
private static readonly customerTypeKey: string = 'VN_CT';

public static getToken() {
    return window.localStorage[this.tokenKey];
}

public static saveToken(token: String) {
    window.localStorage[this.tokenKey] = token;
}

【问题讨论】：

尝试使用 setItem localStorage.setItem('user', token);并在重新加载前执行 console.log 检查以检查密钥是否设置正确。

标签： angular browser

【解决方案1】：

登录的用户详细信息存储在本地存储中，因此用户如果他们刷新浏览器，也会保持登录状态浏览器会话，直到他们注销。如果您不希望用户留下在刷新或会话之间登录，行为可能很容易通过将用户详细信息存储在不那么持久的地方进行更改，例如会话存储或身份验证服务的属性中。

你应该像这样将它保存在localStorage：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { map } from 'rxjs/operators';

@Injectable()
export class AuthenticationService {
    constructor(private http: HttpClient) { }

    login(username: string, password: string) {
        return this.http.post<any>(`${config.apiUrl}/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://jasonwatmore.com/post/2018/05/16/angular-6-user-registration-and-login-example-tutorial

【讨论】：