Question

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

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

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

1 个答案: