Question

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

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

如何解决这个问题？

app.component.ts

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

login.service.ts

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

login.component.ts

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;
}

Answer 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

刷新页面后，currentUser为null

1 个答案: