Использовать токен из локального хранилища в HTTP-запросе в Ionic 2

У моего приложения Ionic 2 есть логин и он хранит токен аутентификации в локальном хранилище. Затем я хочу использовать этот токен в моих HTTP-запросах.Использовать токен из локального хранилища в HTTP-запросе в Ionic 2

В моей службе Идента У меня есть следующий метод:

authToken() { 
     return this.storage.get('auth_token').then((val) => { 
     return val; 
     }); 
    }

И тогда в моей службе, которая делает запрос HTTP У меня есть:

export class Rides { 

    token: string; 

    constructor(public http: Http, public authentification: Authentification) { 
     this.authentification.authToken().then((val) => { 
      this.token = val; 
      console.log(this.token); 
     }); 
    } 

    getOpenRides() { 
     var headers = new Headers(); 
     headers.append('Authorization', 'Token token=' + this.token); 
     return this.http.get('URL', { headers: headers }) 
     .map(res => res.json()); 
    } 

}

Он регистрирует правильный маркер в моей службе Rides конструктор. Но тогда, когда я использую токен в HTTP-запросе, мой сервер говорит, что отправлено token = undefined.

Что мне нужно делать другим?

Это компонент страницы, где я называю getOpenRides и где я хочу, чтобы отобразить результат:

import { Component } from '@angular/core'; 
import { NavController, NavParams } from 'ionic-angular'; 
import { Rides } from '../../providers/rides'; 

/* 
    Generated class for the Agenda page. 

    See http://ionicframework.com/docs/v2/components/#navigation for more info on 
    Ionic pages and navigation. 
*/ 
@Component({ 
    selector: 'page-agenda', 
    templateUrl: 'agenda.html', 
    providers: [Rides] 
}) 
export class AgendaPage { 

    openRides: any; 

    constructor(public navCtrl: NavController, public navParams: NavParams, public rides: Rides) {} 

    ionViewDidLoad() { 
    this.openRides = this.rides.getOpenRides() 
    .subscribe(response => { console.log(response.rides) }); 
    }

}

источник

2017-02-10 almo

Когда и где вы вызываете функцию 'getOpenRides'? – Alex

Я вызываю его в компонент страницы, где я хочу показывать открытые поездки. Я добавил его к моему вопросу. – almo

Хм, и я предполагаю, что вы установили токен аутентификации в другой компонент? Если это так, проблема должна заключаться в 'providers: [Rides]' в ваших компонентах. Где бы вы ни объявляли поставщиков в компоненте, это означает, что это новый экземпляр службы, поэтому он не будет иметь доступа к свойствам, установленным другим компонентом и сервисом. Попробуйте добавить 'providers: [Rides, AuthService]' в свой ngModule вместо этого и удалите одиночных поставщиков из компонентов. Это означает, что все компоненты этого модуля используют ** ту же ** службу и имеют доступ к переменным, установленным из других компонентов. – Alex

Проблема должна заключаться в том, что вы маркировке поставщиков в ваших компонентах, что означает, что при создании каждого компонента они используют новый чистый экземпляр службы, где токен не определен.

Если вы разместите поставщиков в своем NgModule вместо компонентов, это означает, что служба одинакова для всех компонентов в этом модуле. Поэтому, когда ваш компонент AgendaPage создается, он будет иметь тот же сервис, что и тот, который устанавливает токен.

Так удалить из поставщиков (все) компонентов:

@Component({ 
    selector: 'page-agenda', 
    templateUrl: 'agenda.html', 
    // providers: [Rides] // remove! 
})

и объявить в вашем NgModule вместо:

@NgModule({ 
    imports: [...], 
    declarations: [...], 
    providers: [ Rides, .... ], // add this! 
    bootstrap: [ ... ] 
})

Надеется, что это помогает! :)

источник

2017-02-11 21:19:35 Alex

Использовать токен из локального хранилища в HTTP-запросе в Ionic 2

ответ

Смежные вопросы