在 Angular 应用程序中刷新仪表板页面时清除 localStorage 中的令牌

Question

我正在尝试找出一种方法来保持我的角度变量与页面刷新/跨组件。我的工作流程是

• 用户通过凭据（用户名和密码）登录并获取访问令牌
• 每个请求都将使用用户访问令牌

通过我的应用程序可以正常工作。当用户登录并获取访问令牌并将此令牌保存在本地存储中。并且应用程序将用户重定向到仪表板组件。

但问题是，如果我刷新页面，localstorage 会变为空白，应用程序会再次将用户重定向到登录页面。

我对 Angular 很陌生，无法找到在页面刷新后保留我的数据的方法，非常感谢任何帮助。

dashboard.component.ts

auth.service.ts

jwt.interceptor.ts

auth.service.ts

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { BehaviorSubject } from 'rxjs';
import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http';
import { Signin, ResetPassword } from '../model/user.model';
import { Router } from '@angular/router';

@Injectable()
export class AuthService {
  private URL_Register = 'http://localhost:52718/account/register'; //Register User (Working)
  private URL_Signin = 'http://localhost:52718/account/Signin'; // Login User (Working)
  private URL_Token = 'http://localhost:52718/connect/token'; // Get Token Against Register User (Working)
  private URL_Data = 'http://localhost:52718/api/values'; // Get Token Against Register User (Working)
  private URL_Claims = 'http://localhost:52718/account/Get';
  private URL_PasswordRecovery = 'http://localhost:52718/account/ForgotPassword';
  private URL_ChangePassword = 'http://localhost:52718/account/ChangePassword';
  public isUserAuthenticated: boolean = false;
  private loggedIn = new BehaviorSubject<boolean>(false); // {1}

  get isLoggedIn() {
    return this.loggedIn.asObservable(); // {2}
  }

  constructor(
    private http: HttpClient,
    private router: Router) { }

  userAuthentication(credientials: Signin) {
    let reqHeader = new HttpHeaders({ 'Content-Type': 'application/json' });
    return this.http.post(this.URL_Signin, JSON.stringify(credientials), { headers: reqHeader }).subscribe((data: any) => {
      localStorage.setItem('userToken', data.token);
      this.loggedIn.next(true);
      this.router.navigate(['/dashboard']);
    },
      (err: HttpErrorResponse) => {
        console.log('Auth Service (Method userAuthentication): [HttpError] ' + err.message)
      });
  }


  fetchData() {
    return this.http.get(this.URL_Data);
  }

  getUserClaims() {
    return this.http.get(this.URL_Claims);
  }

  logout() {
    // remove user from local storage to log user out
    localStorage.removeItem('userToken');
    this.loggedIn.next(false);
    this.router.navigate(['/login']);
  }


  forgotPassword(ResetPassword: ResetPassword) {
    let reqHeader = new HttpHeaders({ 'Content-Type': 'application/json' });
    return this.http.post(this.URL_PasswordRecovery, JSON.stringify(ResetPassword), { headers: reqHeader }).subscribe((data: any) => { },
      (err: HttpErrorResponse) => {
        console.log('Auth Service (Method userAuthentication): [HttpError] ' + err)
      });;
  }

  changePassword(QueryParams: Object) {
    let reqHeader = new HttpHeaders({ 'Content-Type': 'application/json' });
    return this.http.put(this.URL_ChangePassword, JSON.stringify(QueryParams), { headers: reqHeader }).subscribe((data: any) => {
      localStorage.setItem('userToken', data.token);
      this.loggedIn.next(true);
      this.router.navigate(['/dashboard']);
    },
      (err: HttpErrorResponse) => {
        console.log('Auth Service (Method changePassword): [HttpError] ' + err)
      });;
  }

}

Answer 1

我发现如果我更改下面的代码

get isLoggedIn() {
    return this.loggedIn.asObservable(); // {2}
}

进入

get isLoggedIn() { 
    let currentUser = localStorage.getItem('userToken'); 
    if (!currentUser) { } 
    this.loggedIn.next(true); 
    return this.loggedIn.asObservable();
}

现在我不需要重新登录和本地存储。

场景背后的逻辑是我在上面将loggedIn 属性设置为false，这就是为什么当我默认刷新页面时，loggedIn 方法会在注销当前用户后将我重定向到登录页面。所以我修改了这个属性并检查用户是否在浏览器本地存储中有令牌，然后不要重定向或不需要删除它的令牌。

与此同时，我的问题已经解决。但我也在寻找更好的答案。