javascript - 在每个组件中存储和访问全局标志/变量,值不断变化
问题描述
我正在尝试创建一个全局服务类,它将存储一些变量,这些变量会影响基于标志的 HTML 组件的行为。我目前唯一的标志是一个 BehaviourSubject 导航栏组件订阅它以使用不同的按钮更新导航栏。问题是当我在浏览器中刷新页面时,标志反转为原始值并忘记了之前设置的内容。当前场景是当用户登录标志设置为真并且应该保持真直到用户注销。如果有更好的方法,它可能不是正确的方法;那么我很乐意实施它。
数据共享类:
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() {}
}
解决方案
尝试使用localStorage变量来实现相同的目的。
在服务类中创建一个函数,如果用户登录并函数获取相同的令牌,它将使用令牌设置变量。
const key = 'abcde'
setUseLoggedIn(token){
localStorage.setItem(this.key,token);
}
getUserLoggedIn(){
return localStorage.getItem(this.key);
}
如果用户未登录,则将 token 设置为 null,并在检索 token 时检查是否相同。
推荐阅读
- javascript - 如何将来自Nodejs后端的图像渲染为res.json()?
- android - ParseObject:有什么方法可以从 ParseObject 创建 JSON?
- wordpress - Wordpress 发布“我的”
- testing - 测试咖啡馆页面重新加载
- powershell - 如何从 Internet Explorer 导出收藏夹
- go - 我们如何知道用户通过 api 在 github 中更改了默认的个人资料图片
- python-2.7 - 使用 FLASK 框架解析带有转义字符的 JSON 正文
- sql - 如何将重复的标签/字符串数据插入表中
- php - Woocommerce - 在订单详细信息中显示总项目,需要找出放置它的位置
- javascript - 从某个半径内的多个 JSON 图层中选择标记