Ionic 3.9: iOS: запрос API с JWT / AuthHttp: получение ответа со статусом: 0 для URL: ноль - PullRequest
0 голосов
/ 13 октября 2018

Я столкнулся с проблемами с запросами API с токеном (JWT - AuthHttp) после входа в систему (я думаю, что Webview виноват).

Это моя ионная информация:

Ionic:

   ionic (Ionic CLI)  : 4.1.1 (/usr/local/lib/node_modules/ionic)
   Ionic Framework    : ionic-angular 3.9.2
   @ionic/app-scripts : 3.1.8

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : ios 4.5.5
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.2.0, (and 14 other plugins)

System:

   Android SDK Tools : 26.1.1 (/Users/pieter-jan/Library/Android/sdk)
   NodeJS            : v8.9.4 (/usr/local/bin/node)
   npm               : 6.4.1
   OS                : macOS High Sierra
   Xcode             : Xcode 9.2 Build version 9C40b

Приложение работает с токеном JWT, что означает, что пользователь входит в систему с помощью обычного this.http.post ('url_to_login', учетные данные).Пользователь запрашивает токен из API и получает его обратно, который затем сохраняется в локальном хранилище.После этого пользователь запрашивает данные из API с этим токеном, используя this.authHttp.get ('url_to_data_you_want').Этот метод имеет tokenGetter, записанный в app.module.ts следующим образом:

export function getAuthHttp(http: Http) {
      let storage = new NativeStorage();
      return new AuthHttp(new AuthConfig({
        noJwtError: true,
        globalHeaders: [{'Accept': 'application/json'}],
        tokenGetter: (() => storage.getItem('id_token').then(token => {
            alert(token);
            return token;
        })),
      }), http);
    }

@NgModule({
  ...
  providers: [
    {
      provide: AuthHttp,
      useFactory: getAuthHttp,
      deps: [Http]
    },
  ],
  ...
})

Таким образом, каждый раз, когда делается запрос authHttp, запускается tokenGetter.До того, как я тестировал в iOS, я тестировал это в Android, и он отлично работал с компонентом ионного хранения.При тестировании в iOS я обнаружил, что компонент ионного хранилища поврежден из-за веб-просмотра iOS.Поэтому мне сказали использовать NativeStorage от Ionic Native.Это на самом деле работает сейчас, потому что я предупреждаю токен с каждым запросом, и он проверяется.Пользователь может войти в систему, но после этого я получаю ответ, подобный этому: «Ответ со статусом: 0 & url: null».API отвечает: «Требуется токен», что означает, что запросы authHttp не несут токен с ним.

Я пытался добавить токен с запросом, но я остался безуспешным.

user-service.ts

// ЭТО РАБОТАЕТ

login(body) {
    return new Promise((resolve, reject) => {
      this.http.post(this.apiUrl+'/get_token', body)
      .toPromise()
      .then(data => {
        alert('[DATA FROM API]' + data);
        let token = data;
        this.storage.setItem('id_token', token);
        resolve(token);
      })
      .catch(err => {
        reject(err);
      });
    });
  }

// ЭТО НЕ ДЕЛАЕТ // возвращает ответ: 0 & url: null

getUser() {
    return this.authHttp.get(this.apiUrl + '/user')
    .map(res => {
      alert('[user-service.ts] :: getUser() => authHttp.get()');
      alert('[user-service.ts] :: getUser() => authHttp.get() => data :: ' + JSON.stringify(res, null, 4));
      let data = res.json();
      let location = data.app_location;
      let pushes = data.app_pushes;
      let avatar = data.avatar_base64;
      let email = data.email;
      let firstname = data.firstname;
      let id = data.id;
      let lastname = data.lastname;
      let profile = data.profile;
      let username = data.username;
      return new User(location, pushes, avatar, email, firstname, id, lastname, profile, username);
    });  
  }

login.ts

login() {
    this.storage.getItem('device_id').then(device_id => {
      this.userService.login({email: this.user['email'], password: this.user['password'], device_id: device_id})
      .then( token => {
        this.storage.getItem('id_token').then(id_token => {
          if(id_token === token) {
            alert('Token is a match!');
            this.loadingCtrl.create({
              content: 'Logging in...',
              duration: 5000,
              dismissOnPageChange: true
            }).present();
            setTimeout(() => {
              this.navCtrl.push(OverviewPage).then(res => {
                alert('[LOGIN.TS] => going to overviewpage ' + JSON.stringify(res, null, 4));
              }).catch(err => {
                alert('[ERROR] ' + err);
              });
            }, 500);
          }
        });
      });
    })
  }

profile.ts ionViewWillEnter () {

    // DOES NOT WORK
    this.userService.getUser().subscribe( user => {
      alert('[Overview.ts] :: View Will Enter => getUser() :: init');
      alert('[Overview.ts] :: View Will Enter => getUser() => user :: ' + JSON.stringify(user, null, 4));
      this.user = user;
      this.location = user.location;
      this.pushes = user.pushes;
      this.avatar = user.avatar;
    });

    this.errors = ['', '', ''];

    // THIS WORKS
    return this.userService.checkToken();
  }

Заранее благодарим за любые предложения или отзывы.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...