Question

我有一个有角度的2 / Ionic 3项目，我试图做以下事情：

我有一个提供商AuthenticationProvider，我有一个＆＃39;令牌＆＃39;属性。

从我的loing.ts，我想将登录参数传递给提供者，从服务器生成一个令牌，然后存储然后更新＆＃39;令牌＆＃39;服务中的属性，所以我可以从其他组件中调用它。

我试图回归＆＃39; true＆＃39;如果成功和“假”＆＃39;如果没有成功。

然而，这不起作用。

这是我的提供者：

import {LoginResponse} from './../../types/interface';
import {AppSettings} from './../app-setting';
import {HttpClient, HttpHeaders, HttpParams} from '@angular/common/http';
import {Injectable} from '@angular/core';


@Injectable()
export class AuthenticationProvider {
    public token: string = "";

    constructor(
        public http: HttpClient) {
    }

    getLogin(username: string, password: string) {
        let headers = new HttpHeaders({
            'Accept': 'application/json',
            'Content-Type': 'application/x-www-form-urlencoded',
            'APIKey': AppSettings.API_KEY
        });

        const body = new HttpParams()
            .set('grant_type', 'password')
            .set('metadata', 'device=android,appversion=2.0')
            .set('username', username)
            .set('password', password) ;

        const url: string = AppSettings.API_ENDPOINT + '/api/auth';
        this.http.post<LoginResponse>(url, body.toString(), { headers })
            .subscribe(res => {
                this.token = res.access_token;
                return true;
            }, (err) => {
                console.log(err);
                return false;
            })
    }

}

export interface LoginResponse {
    "access_token": string;
    "expires_in": number;
    "expires": string;
}

这是我的登录组件：

import {AuthenticationProvider} from './../../providers/authentication/authentication';
import {Component} from '@angular/core';
import {IonicPage, NavController, NavParams} from 'ionic-angular';

@IonicPage()
@Component({
    selector: 'page-login',
    templateUrl: 'login.html',
})
export class LoginPage {

    loginId = '';
    password = '';
    pass:any;

    constructor(
      public navCtrl: NavController,
      public navParams: NavParams,
      private authService: AuthenticationProvider) {
    }

    login() {
      this.authService.getLogin(this.loginId, this.password)
        .subscribe(res =>{
          this.navCtrl.setRoot('nextPage');
        })
    }

}

如果有人能就如何做到这一点给我任何建议，那就太好了。

感谢!!!

Answer 1

在您的服务文件中进行以下更改＆amp;登录组件

getLogin(username: string, password: string) {
    let headers = new HttpHeaders({
        'Accept': 'application/json',
        'Content-Type': 'application/x-www-form-urlencoded',
        'APIKey': AppSettings.API_KEY
    });

    const body = new HttpParams()
        .set('grant_type', 'password')
        .set('metadata', 'device=android,appversion=2.0')
        .set('username', username)
        .set('password', password) ;

    const url: string = AppSettings.API_ENDPOINT + '/api/auth';

    // Return from here
    return this.http.post<LoginResponse>(url, body.toString(), { headers });

}

登录组件

login() {
  this.authService.getLogin(this.loginId, this.password)
    .subscribe(res => {
        // set token in service from here
        this.authService.token  = res.access_token;
      this.navCtrl.setRoot('nextPage');
    }, (err) => {
           console.log(err);
    });
}

Answer 2

Iam更改了以下内容，

您的服务文件： -

getLogin(username: string, password: string) {      
    //All ways common service should be return type.(so here iam changed only one line)
    return this.http.post<LoginResponse>(url, body.toString(), { headers })            
}

您的登录文件： -

添加了一个变量供参考，以检查是否有效。

 public isValid:boolean=false;

第一种方法通常指定值成功块和错误块。

login() {
  this.authService.getLogin(this.loginId, this.password)
    .subscribe(res =>{
        this.authService.token = res.access_token;
        this.isValid=true; // here iam assign true value
      this.navCtrl.setRoot('nextPage');
    }), (err) => {
        this.isValid=false; // here iam assign false value
        console.log(err);
    })
}

第二种方式检查令牌值是（null和undefined）然后分配值。

login() {
  this.authService.getLogin(this.loginId, this.password)
    .subscribe(res =>{
        this.authService.token = res.access_token;
        if(this.authService.token!=null && this.authService.token!=undefined){
           this.isValid=true;  // here iam assign true value
        }
      this.navCtrl.setRoot('nextPage');
    }), (err) => {
        this.isValid=false;  // here iam assign false value
        console.log(err);
    })
}

我希望这能完美地解决你的问题。让我们尝试一次。

此致 Muthukumar。

Answer 3

我认为getLogin()没有返回observable，因此无需在组件中订阅login()方法。

尝试更新提供程序中的属性并将值传递给控制器

3 个答案: