Я столкнулся с проблемами с запросами 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();
}
Заранее благодарим за любые предложения или отзывы.