Question

我的应用程序中有一个登录按钮，当用户单击它时，请求将发送到服务文件，firebase会在该文件中进行身份验证过程。我的问题是，如果登录成功并且设置了令牌，那么我想使用return'Login Success'，然后在前端将其打印到客户端以通知登录成功。我尝试了各种方法，但无法解决此问题。

Component.ts文件

import { Component, OnInit } from '@angular/core';
import { NgForm } from '@angular/forms';
import { AuthService } from '../auth.service';

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

export class LoginComponent implements OnInit {

    constructor(
        private authService:AuthService
    ) { }

    ngOnInit() {
    }

    login(form: NgForm) {
        const email = form.value.input_emailid;
        const password = form.value.input_password;

        this.authService.loginUser(email,password);    

    }

}

我的服务文件（AuthService.ts）

import * as firebase from 'firebase';
import { Router } from '@angular/router';
import { Injectable } from '@angular/core';

@Injectable()
export class AuthService {

constructor(
    private router:Router
) {}

token: string;

loginUser(email: string,password: string) {
  firebase.auth().signInWithEmailAndPassword(email,password)
    .then(
      (response) => {
        this.router.navigate(['/']);
        firebase.auth().currentUser.getIdToken()
        .then(
          (token: string) => {
            this.token = token;
            // Want to return the below return statement
            return 'Login Successful';

          }
        )
      }
    ).catch(
      error => console.log(error)
  )
}

Answer 1

使用Rx时，您不会返回类似的值，而是发布对主题的更改并在组件中进行观察。

为您服务：

import { BehaviorSubject } from 'rxjs';
// ...
private isLoggedInSubject = new BehaviorSubject<boolean>(false);
isLoggedIn$ = this.isLoggedInSubject.asObservable();

// ...
this.token = token;
this.isLoggedInSubject.next(true);

在您的组件中：

this.authService.isLoggedIn$.subscribe(loggedIn => this.message = loggedIn ? 'Logged In' : 'Failure');
this.authService.loginUser(email,password);

Answer 2

您应该将loginUser（）定义为可观察的，并在Login组件中进行订阅。这样，当身份验证完成时，您将成功返回登录，并且订阅该登录的组件将收到通知。

现在它不起作用，因为身份验证过程（可能不确定）是异步的，直到返回值this.authService.loginUser(email,password);为止。

Answer 3

您可以在服务和组件中使用可观察到的RXjs，请参见下面的代码。在您的组件中：

    login(form: NgForm) {
            const email = form.value.input_emailid;
            const password = form.value.input_password;

            this.authService.loginUser(email,password).subscribe(
                 (result) => {
                   if(result){
                      // do what you want here
                    }else{
                      // show error message here
                     }
                  }
              });    

        }

现在，您可以在服务中执行以下操作：导入

import { Observable,of } from 'rxjs';

然后

loginUser(email: string,password: string):Observable<boolean> {
  return of(firebase.auth().signInWithEmailAndPassword(email,password)
    .then(firebase.auth().currentUser.getIdToken()).then(
          (token: string) => {
            this.token = token;
            // Want to return the below return statement
            return true;

          }
        )
    ).catch(
      error => console.log(error)
  ));

请勿更改服务路线。显示消息，然后从组件

更改路由

在角度7中处理服务文件中的返回值

3 个答案: