Javascript 在每个组件中存储和访问全局标志/变量时，值会不断变化

我试图创建一个全局服务类，它将存储一些变量，这些变量将影响基于标志的HTML组件的行为。 我当前唯一的标志是navbar组件订阅以使用不同按钮更新navbar的行为主题。问题是当我在浏览器中刷新页面时，标志会反转为原始值，并忘记以前设置的内容。当前场景是当用户登录标志被设置为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);
  }
}

例如，如果全局标志设置为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() {}

}

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

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

const key = 'abcde'

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

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

---

如果用户未登录，请将令牌设置为null，并在检索令牌时检查是否相同。

尝试将变量创建为常量，这不会改变。但我需要能够根据用户操作将其更新为false/true。将其设置为常量基本上会使其成为受保护的吗？为什么不使用本地存储

const key = 'abcde'

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

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