通过标头授权获得数据2

Question

我目前正在使用Ruby作为后端进行Ionic 2。我面临的问题是我很难理解可观察到的诺言。他们彼此相关吗？现在，我试图在使用标题进行验证后试图检索数据。

//clocks.ts (Provider)
import { Injectable } from '@angular/core';
import { Http, Headers, Response, RequestOptions } from '@angular/http';
import { Storage } from '@ionic/storage';
import 'rxjs/add/operator/map';
@Injectable()
export class Clocks {
  baseUrl: string = "http://localhost:3000/api/v1"
  token: any;
  constructor(public http: Http, public storage: Storage) {}
  getAttendanceInfo() {
    return new Promise((resolve,reject) => {
      // Load token
      this.storage.get('token').then((value) => {
        this.token = value;
        let headers = new Headers();
        headers.append('Authorization', 'Token ' + this.token);
        this.http.get(this.baseUrl + '/attendances.json', {headers: headers})
          .subscribe(res => {
            resolve(res);
          }, (err) => {
            reject(err);
          })
        });
      });
  }

出勤页面

//attendance.ts (Page)
loadAttendance() {
  this.clocks.getAttendanceInfo().then(res => {
    let response = (<Response>res).json();
    this.attendance = response.data;
    console.log(this.attendance)
  })
}

这是我的问题。

1. 在这种情况下，我可以使用可观察力来实现与getAttendanceInfo（）方法相同的结果吗？它们如何工作？

2. ，而且，我有什么办法可以从每个页面请求中从存储中检索令牌，而无需重写标题相同的代码？例如。一种始终可用于从存储中检索令牌并在标题上附加的方法。

非常感谢你们是否能清除我的困惑。

Answer 1

我找到了解决方案。

您可以创建身份验证作为服务提供商的一部分。对于这种情况，我正在使用localstorage。对于备注，令牌的结构也取决于您的后端。就我的情况而

GET /attendances HTTP/1.1
Host: localhost:3000
Authorization: Token token=123123123

我们必须匹配。

// ../providers/auth.ts
import { Injectable } from '@angular/core'; 
import { Http, Headers } from '@angular/http';
import 'rxjs/add/operator/map';
@Injectable()
export class Auth {
  constructor(public http: Http) {}
  createAuthorizationHeader(headers: Headers) {
    headers.append('Authorization', 'Token ' + window.localStorage.getItem('token'));
  }
}

wen您返回HTTP请求，以可观察的格式返回。除非您想转变为承诺，否则您不必对此做任何事情。

// ../pages/attendances/attendances.ts
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Auth } from '../../providers/auth';
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
const baseUrl: string = 'http://localhost:3000/api/v1/';
export class HomePage {
  constructor(public navCtrl: NavController, public auth: Auth) {}
  ionViewDidLoad() {
    this.getAttendances();
  }
  getAttendances() {
    return this.http.get(baseUrl + 'bookings.json', { headers: headers })
      .map(data => {
        // convert your data from string to json
        data = data.json();
      })
      .subscribe(response => {
        // to subscribe to the stream for the response
        console.log(response);
        // you can save your response in object based on how you want it
      })
  }