如何在 Angular 7App 初始化之前清除 LocalStorage

Question

我正在使用 Angular 构建 JWT 登录应用程序 7. 我创建了一个服务 - AccountService，用于处理登录/注销功能，它按计划工作。但我的问题是，本地存储仅在应用程序触发事件时清除。因此令牌和登录变量被清除。如果用户在未注销的情况下关闭浏览器，并在地址栏中输入主页 url，则会转到主页并使用之前的令牌。

如何确保当用户关闭浏览器或首次运行应用程序时，系统完全清除本地存储并阻止访问主页路由，从而将您重定向到登录路由。

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

import { Router } from '@angular/router';


@Injectable({ 
  providedIn: 'root' application..
})


export class AccountService {

  private baseUrlLogin:string = "/api/account/login";

  private loginStatus = new BehaviorSubject<boolean>(this.checkLoginStatus());    //subject/observable/BehaviorSubject  
  private userName = new BehaviorSubject<string>(localStorage.getItem['userName']);
  private userRole = new BehaviorSubject<string>(localStorage.getItem['userrole']);

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

  login(username:string, password:string){

    return this.http.post<any>(this.baseUrlLogin,{username, password}).pipe(
               map(result => {
                  if(result && result.token){
                      localStorage.setItem('loginStatus', '1'); 
                      localStorage.setItem('jwt', result.token);
                      localStorage.setItem('userName', result.username),
                      localStorage.setItem('expiration', result.expiration),
                      localStorage.setItem('userRole', result.userRole);

                      this.loginStatus.next(true); 
                      this.userName.next(localStorage.getItem('userName'));
                      this.userRole.next(localStorage.getItem('userRole'));
                  }
                  return result;

               })
           );

  }

  logout(){
    this.loginStatus.next(false);
    this.clrLocalStorage();
    this.router.navigate(['/login']);
  }


  clrLocalStorage(){
    localStorage.setItem('loginStatus', '0');. 
    localStorage.removeItem('jwt');
    localStorage.removeItem('userName'),
    localStorage.removeItem('expiration'),
    localStorage.removeItem('userRole');
    localStorage.clear();
  }

  checkLoginStatus():boolean{
    var loginCookie = localStorage.getItem("loginStatus");         
    if(loginCookie == "1"){ 
      return true;
    }
    this.clrLocalStorage();
    return false;    
  }   

  get isLoggedIn(){
    return this.loginStatus.asObservable(); 
  }

  get currentUserName(){
    return this.userName.asObservable(); 
  }

  get currentUserRole(){
    return this.userRole.asObservable(); 
  }    

}

在我的家庭控制器上，在 ngInit - 生命周期方法上，这就是我所拥有的

 ngOnInit() {
    let isLoggedIn = this.acc.checkLoginStatus();
    if(!isLoggedIn){
      this.router.navigate(['/login']);
    }else{
      console.log('welcome home... ');
      console.log(localStorage);
    }

  }

如果我重新启动服务器，我也希望它完全清除缓存，并且在启动它之后所有路由 - 应该重定向到登录页面，但我正在修复

Answer 1

我会在 main.ts 开始 Angular 之前完成。

main.ts

clrLocalStorage() {
  localStorage.setItem('loginStatus', '0');. 
  localStorage.removeItem('jwt');
  localStorage.removeItem('userName'),
  localStorage.removeItem('expiration'),
  localStorage.removeItem('userRole');
  localStorage.clear();
}
clrLocalStorage();

// Angular bootstrap
platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

如何在 Angular 7App 初始化之前清除 LocalStorage

How to Clear LocalStorage before Angular 7App initializes

javascript

node.js

typescript

angular7