调用Observable在里面订阅

时间:2018-06-14 01:58:17

标签: angular observable subscribe ecmascript-7

我仍然遇到Observables和Subscribers的一些问题,我面临的是如果我在组件中调用Observable方法而不是Data。它未定义:

login(username: string, password: string): Observable<any> {
       const body =  {
            'Mobile': username,
            'Password': password,
            };
        return this.http.post(`${this.baseURL + this.loginApiRoot}/Login`, body)
            .pipe(map((response: Response) => {
                const jobj = JSON.parse(response.text());
                const loginrequest = jobj['lr'];
                const token = loginrequest['token'];
                const is2auth = loginrequest['authtype'];
                const schoolcode: string[] = jobj['schoolcode'];
                // login successful if there's a jwt token in the response
                if (token && token !== 'Invalid Login' ) {
                    if (token === 'Oops! seems you have not confirmed your email') {
                      return {result: false, message: token};
                    }
                    this.getUserRole(token).subscribe(userRole => {
                      this.userRole = userRole[0];
                      if (this.userRole === 'school' || this.userRole === 'admin') {
                        this.LoginSuccess(token, username, is2auth);
                        // return {result: true, message: token};
                      } else {
                        this.LoginFailed(token, username, is2auth);
                        // return {result: false, message: token};
                      }
                    });
                } else {
                    // return false to indicate failed login
                    this.LoginFailed(token, username, is2auth);
                    return {result: false, message: token};
                }
            }));
    }

调用方法:

this.authenticationService.login(this.model.username, this.model.password)
    .subscribe(
      data => {
        // tslint:disable-next-line:prefer-const
        console.log(data);
        let result = data.result;

这个console.log将数据作为未定义返回。

另一个项目的代码工作正常:

login(username: string, password: string): Observable<any> {        
       var body =  {
            "Email":username,
            "Password":password,
            }          
        return this.http.post(`${this.loginApiRoot}/Login`, body)
            .map((response: Response) => {
                let jobj = JSON.parse(response.text());
                let token = jobj["token"];
                let is2auth=jobj["authtype"];
                // login successful if there's a jwt token in the response
                if (token && token!="Invalid Login" ) {
                    if (token =="Oops! seems you have not confirmed your email"){
                        return {result:false,message:token};
                    }
                    this.token = token;
                    this.isValidUser = true
                    this.userEmail = username;
                    this.setToken(username, token)
                    this.authType=is2auth;
                    if (is2auth==1)
                    {   
                        this.isLogin=true;
                        this.is2Auth=true;
                        this.router.navigate(['/markets']);
                        return {result:true,message:token};
                    }
                    else if (is2auth>1)
                    {
                       this.isLogin = true;
                       this.is2Auth=false;
                       this.router.navigate(['/verify2auth']);
                       return {result:false,message:token};
                    }
                    else
                    {
                    }
                }

                else {
                    // return false to indicate failed login
                    return {result:false,message:token};
                }
            });
    }

2 个答案:

答案 0 :(得分:2)

您应该在组件内进行所有验证而不是服务,只需从服务中返回observable并在订阅中进行验证,

 return this.http.post(`${this.baseURL + this.loginApiRoot}/Login`, body)
 .pipe(map((response: Response) => {
    return response;
}));

并在组件中

this.authenticationService.login(this.model.username, this.model.password)
    .subscribe(data => {
    let result = data;
     // do all your validations here
}

你也在第一次调用中创建了另一个http get方法来获取UserRole,你应该在从第一次调用中重新将它作为一个函数分开。

答案 1 :(得分:0)

您需要根据您的要求在此行返回一些内容

if (this.userRole === 'school' || this.userRole === 'admin') {
                        this.LoginSuccess(token, username, is2auth);
                        // return {result: true, message: token};
                      } else {
                        this.LoginFailed(token, username, is2auth);
                        // return {result: false, message: token};
                      }