在Angular Application中刷新仪表板页面时，localStorage中的令牌被清除

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

• 用户通过凭据（用户名和密码）登录并获取访问令牌

• 用户访问令牌将与每个请求一起使用

Al通过我的应用程序工作正常 . 用户登录并获取访问令牌并将此令牌保存在localstorage中 . 应用程序将用户重定向到仪表板组件 .

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

我对角度很新，并且在页面刷新后无法找到保留我的数据的方法任何帮助都会非常感激 .

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

}