javascript - 在每个组件中存储和访问全局标志/变量，该值不断变化

Question

我正在尝试创建一个全局服务类，它将存储一些变量，这些变量将影响基于标志的 HTML 组件的行为。我当前唯一的标志是 BehaviourSubject，导航栏组件订阅该行为主题以使用不同的按钮更新导航栏。问题是当我在浏览器中刷新页面时，标志会反转为原始值并忘记之前设置的内容。当前的情况是当用户登录时该标志被设置为 true 并且应该保持 true 直到用户注销。这可能不是正确的方法，因此如果有更好的方法可以实现这一点；然后我很乐意实现它。

数据共享类:

import {
  Injectable
} from '@angular/core';
import {
  BehaviorSubject
} from 'rxjs';

@Injectable()
export class ServiceClassDatasharing {
  public isUserLoggedIn: BehaviorSubject < boolean > = new BehaviorSubject < boolean > (false);
  public setUserLoggedInStatus(status) {
    this.isUserLoggedIn.next(status);
  }
}

导航组件:

import {
  Component,
  OnInit
} from '@angular/core';
import {
  MatDialog,
  MatDialogRef,
  MAT_DIALOG_DATA
} from '@angular/material';
import {
  Inject
} from '@angular/core';
import {
  ServiceClassDatasharing
} from '../service/service-class-datasharing';
import {
  ServiceClassAuth
} from '../service/service-class-auth';
import {
  SigninComponent
} from './../signin/signin.component';
import {
  Router
} from '@angular/router';


@Component({
  selector: 'app-nav',
  templateUrl: './nav.component.html',
  styleUrls: ['./nav.component.css']
})
export class NavComponent implements OnInit {

  id_token: Boolean;
  username: String;

  constructor(public dialog: MatDialog, private dataSharingService: ServiceClassDatasharing,
    private authService: ServiceClassAuth, private router: Router) {

    this.dataSharingService.isUserLoggedIn.subscribe(res => {
      this.id_token = res;
      if (this.id_token) {
        const user = JSON.parse(localStorage.getItem('user'));
        this.username = user['user'].user_username;
      }
    });
    if (!this.id_token) {
      router.navigate(['index']);
    }
  }

  ngOnInit() {}

  openDialog(): void {
    let dialogRef = this.dialog.open(SigninComponent, {
      width: '450px',
      data: {}
    });
  }

  public logout() {
    this.authService.logout().subscribe(res => {
      if (res['success']) {
        localStorage.clear();
        this.dataSharingService.setUserLoggedInStatus(false);
      }
    });
    this.router.navigate(['index']);
  }

}

以索引组件为例，如果全局标志设置为 true，它应该将用户重定向到仪表板。

import {
  Component,
  OnInit
} from '@angular/core';
import {
  ServiceClassDatasharing
} from '../service/service-class-datasharing';

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

@Component({
  selector: 'app-index',
  templateUrl: './index.component.html',
  styleUrls: ['./index.component.css']
})
export class IndexComponent implements OnInit {
  constructor(private dataSharingService: ServiceClassDatasharing, private router: Router) {
    if (this.dataSharingService.isUserLoggedIn.value) {
      this.router.navigate(['dashboard']);
    }
  }

  ngOnInit() {}

}

Answer 1

尝试使用localStorage变量来实现相同的效果。

在服务类中创建一个函数，如果用户登录并获取相同的 token ，该函数将使用 token 设置变量。

const key = 'abcde'

setUseLoggedIn(token){
 localStorage.setItem(this.key,token);
}

getUserLoggedIn(){
 return localStorage.getItem(this.key);
}

如果用户未登录，则将 token 设置为空，并在检索 token 时检查是否相同。