Angular 2 window.postmessage

Question

我正在 Angular 2 中使用节点和 express api 后端开发电子商务应用程序。我目前正在使用 passport-facebook 和 jwt 进行身份验证的社交登录部分。我的代码关注点围绕着 Angular 2 部分。当用户点击 login/register with facebook 按钮时，它会打开一个新选项卡，开始 facebook 登录流程。然后该窗口将通过 window.postMessage 将 jwt 返回给开启器。然后打开器向窗口发送一条成功消息，打开的窗口将关闭。一切正常，但不是很干净，即我不得不破解它才能正常工作。理想情况下，我会调用我的授权服务来处理 facebook 登录，而不是处理组件中的所有内容，而是在 window.postMessage 的事件处理程序中处理。postMessage 'this' 不再引用该组件，它引用 window 对象，因此我无法调用通过“这个”服务。我无法弄清楚如何获取对该组件的引用，以便我可以调用该服务。有人有什么建议吗？

下面是我的 typescript 登录组件。如果需要，我可以包含其他代码，但我不知道是否需要它。

import { Component, OnInit, AfterViewChecked } from '@angular/core';
import { AuthService } from './auth.service';
import { Router } from '@angular/router';
import { ILoginUser } from './loginUser.model';


@Component({
  moduleId: module.id,
  templateUrl: 'login.component.html',
  styleUrls: ['login.component.css']
})
export class LoginComponent implements OnInit {
constructor(private _authService: AuthService, private _router: Router) { 
   if (window.addEventListener) {
     window.addEventListener("message", this.receiveMessage, false);
    } else {
      (<any>window).attachEvent("onmessage", this.receiveMessage);
   }
  }

  ngOnInit() { }

  user: ILoginUser = {
    username: "",
    password: ""
  }

  error: boolean = false;
  success: boolean = false;
  errorMessage: string = "";
  redirect: boolean = false;

  login() {
    this._authService.login(this.user).subscribe(data => {
        console.log (data);
          if (data.success){
            this._router.navigate(['/product']);

        } else {
        this.error = true,
        this.errorMessage = data.message
      }
    }, errorMsg => {
      this.error = true;
      this.errorMessage = errorMsg;
    });
  }

  receiveMessage(event: any)
    {

      if (event.origin !== "http://localhost:3000")
        return;
      localStorage.setItem("token", event.data.token);
      localStorage.setItem("username", event.data.username);
      (<any>window).popup.postMessage("success", "http://localhost:3000");
    }


  ngAfterViewChecked() {
    //since we can't call the authservice directly we check to see if a redirect flag is set to true
    if (this.redirect) {
      this._router.navigate(['/product']);
    }
  }

  authFacebook() {
    (<any>window).popup = window.open('http://localhost:3000/api/auth/facebook');
   //set the redirect flag to true so when angular checks again we can redirect to the products page
   this.redirect = true;
  }
}

Answer 1

您还可以使用@HostListener() 函数装饰器:

@HostListener('window:message', ['$event'])
onMessage(event) {
  this.receiveMessage(event);
}