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

Question

我正在尝试创建一个全局服务类，该类将存储一些变量，这些变量将影响基于标志的HTML组件的行为。 我目前唯一的标志是一个行为主体，导航栏组件订阅以使用不同的按钮更新导航栏。问题是当我在浏览器中刷新页面时，标志会反转为原始值并忘记之前设置的内容。当前方案是当用户登录标志设置为 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变量来实现相同的 .

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

const key = 'abcde'
setUseLoggedIn(token){
localStorage.setItem(this.key,token);
}
getUserLoggedIn(){
return localStorage.getItem(this.key);
}

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