时间戳

首页 > 解决方案 > 如何从订阅中设置全局变量的值

angular - 如何从订阅中设置全局变量的值

问题描述

我需要将 HTML 表单中提供的电子邮件地址与我从模拟 API 获得的电子邮件地址进行比较。如果电子邮件地址匹配，那么现在就足以成功授权。我试图通过isAuthorized在loginUser()方法中创建一个布尔变量来存档它，我将其初始值设置为false，如果电子邮件地址匹配，我试图将其设置为true在 http 请求的订阅中，但这不起作用.

如何实施上述授权？我是 Angular 的新手。

登录组件.ts

    import { Component, OnInit, HostListener } from '@angular/core';
    import { Router } from '@angular/router';

    import { LoginStateService } from 'src/app/login-state.service'    
    import { UserService } from '../user.service';
    import { HttpService } from '../http.service';

    interface Users {
      [key: string]: {
        email?: string;
      }
    }


    @Component({
      selector: 'app-login',
      templateUrl: './login.component.html',
      styleUrls: ['./login.component.css'],
    })

    export class LoginComponent implements OnInit {

      loginStateText: string;
      loginRout: string;

      constructor(
        private router: Router, 
        private user: UserService, 
        private loginState: LoginStateService, 
        private cssHelper: CssHelperService,
        private http: HttpService) { 
        }

      ngOnInit() {
        this.loginState.currentButtonText.subscribe(
          loginStateText => this.loginStateText = loginStateText
        );  
        this.loginState.currentRout.subscribe(
          loginRout => this.loginRout = loginRout
        ); 
      }

  loginUser(e){
    e.preventDefault;
    let email: string = e.target.elements[0].value;
    let isAuthorized: boolean = false;

    this.http.getUserId().subscribe(data => {  
    alert('Input: ' + email + '  /  JSON: ' + data[0].email);   
      if(email == data[0].email){
        console.log('Auth OK');
        isAuthorized = true;
      }
      else{
        console.log('Auth not OK');
      }
    })

    if(isAuthorized){
      this.user.setUserLoggedIn();
      this.loginState.ChangeLoginButtonText("Logout");
      this.loginState.ChangeLoginRout('/logout');
      alert("Authorization success");
      this.router.navigate(["/dashboard"]);
    }else{
      alert('Authorization failed, please check your credentials.')
    }
  }
}

标签： angular

解决方案

您的逻辑应该在从服务器获取数据后执行。现在编写的代码不会等待 api 请求完成。

动起来

if(isAuthorized){
  this.user.setUserLoggedIn();
  this.loginState.ChangeLoginButtonText("Logout");
  this.loginState.ChangeLoginRout('/logout');
  alert("Authorization success");
  this.router.navigate(["/dashboard"]);
}else{
  alert('Authorization failed, please check your credentials.')
}

进入订阅回调。

loginUser(e){
e.preventDefault;
let email: string = e.target.elements[0].value;
let isAuthorized: boolean = false;

this.http.getUserId().subscribe(data => {  
alert('Input: ' + email + '  /  JSON: ' + data[0].email);   
  if(email == data[0].email){
    console.log('Auth OK');
    isAuthorized = true;
  }
  else{
    console.log('Auth not OK');
  }

if(isAuthorized){ // here your logic should execute
  this.user.setUserLoggedIn();
  this.loginState.ChangeLoginButtonText("Logout");
  this.loginState.ChangeLoginRout('/logout');
  alert("Authorization success");
  this.router.navigate(["/dashboard"]);
}else{
  alert('Authorization failed, please check your credentials.')
}

})

}

推荐阅读