angular2-jwt token.split不是一个函数

Question

我一直在尝试解决此错误，但我只是不知道怎么了。我正在使用ionic2/angular2和angular2-jwt库一起使用，但我一直遇到一个错误，说 token.split is not a function。

我相信这与我的存储有关。我正在使用离子学Storage

我发挥了一个功能来检查令牌是否过期

jwtHelper: JwtHelper = new JwtHelper();
token;
checkToken() {
  this.token = this.storage.get('token');
  console.log(this.token);
  //let token2 = JSON.stringify(this.token);
  //console.log(token2);
  if (this.jwtHelper.isTokenExpired(this.token))
  {
    console.log("valid");
  }
  else {
    console.log("expired");
  }
}

这是上面的console.log(this.token)打印出来的，这就是为什么我相信存储是问题Object { __zone_symbol__state: null, __zone_symbol__value: Array[0] }

控制台

这就是称为 checkToken()

的原因

getInfo(): Observable<any> {
  this.tokenProvider.checkToken();
  return this.authHttp.get('')
    .map(
      (response: Response) => {
        return response.json().sites;
      },
      (error: Response) => {
        console.log(error);
      }
    );
}

登录后我如何设置令牌

setToken(token) {
  this.storage.set('token', token);
}

app.module.ts

import {IonicStorageModule, Storage} from '@ionic/storage';
import { AuthHttp, AuthConfig} from 'angular2-jwt';
export function getAuthHttp(http, storage) {
  return new AuthHttp(new AuthConfig({
    headerPrefix: '',
    noJwtError: true,
    globalHeaders: [{'Accept': 'application/json', 'Content-Type': 'application/json', 'X-Requested-With': 'XMLHttpRequest'}],
    tokenGetter: (() =>   storage.get('token')),
  }), http);
}
imports: [
  BrowserModule,
  IonicModule.forRoot(MyApp),
  FormsModule,
  HttpModule,
  IonicStorageModule.forRoot()
],
providers: [ 
 .....
AuthHttp,
{
  provide: AuthHttp,
  useFactory: getAuthHttp,
  deps: [Http, Storage]
},

package.json

{
  "name": "ionic-hello-world",
  "version": "0.0.0",
  "author": "Ionic Framework",
  "private": true,
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@angular/common": "4.0.2",
    "@angular/compiler": "4.0.2",
    "@angular/compiler-cli": "4.0.2",
    "@angular/core": "4.0.2",
    "@angular/forms": "4.0.2",
    "@angular/http": "4.0.2",
    "@angular/platform-browser": "4.0.2",
    "@angular/platform-browser-dynamic": "4.0.2",
    "@ionic-native/core": "3.4.2",
    "@ionic-native/splash-screen": "3.4.2",
    "@ionic-native/status-bar": "3.4.2",
    "@ionic/storage": "^2.0.1",
    "angular2-jwt": "^0.2.3",
    "ionic-angular": "3.1.0",
    "ionicons": "3.0.0",
    "ng2-completer": "^1.4.0",
    "rxjs": "5.1.1",
    "sw-toolbox": "3.4.0",
    "zone.js": "^0.8.5"
  },
  "devDependencies": {
    "@ionic/app-scripts": "^1.3.6",
    "typescript": "~2.2.1"
  },
  "cordovaPlugins": [
    "cordova-plugin-whitelist",
    "cordova-plugin-console",
    "cordova-plugin-statusbar",
    "cordova-plugin-device",
    "cordova-plugin-splashscreen",
    "ionic-plugin-keyboard"
  ],
  "cordovaPlatforms": [],
  "description": "installerApp: An Ionic project"
}

Answer 1

问题是存储返回 Promise ，因此您需要等待该承诺在使用令牌之前得到解决。

checkToken(): Promise<any> {
  // We're going to return the promise, so the calling method will use it
  // to wait until the token is obtained from the storage
  return this.storage.get('token').then(token => {
    this.token = token; // Assign the token to the this.token property
    console.log(this.token);
    //let token2 = JSON.stringify(this.token);
    //console.log(token2);
    if (this.jwtHelper.isTokenExpired(this.token)) {
      console.log("valid");
    } else {
      console.log("expired");
    }
  });
}

，然后

getInfo(): Observable<any> {
  // The checkToken method returns a promise, so we're going to
  // create an observable with it, and then use the 'flatMap' operator
  // in order to make the get request only if the token is ready
  return Observable.fromPromise(this.tokenProvider.checkToken())
                   .flatMap(() => {
                     // Here the token is ready!
                     return this.authHttp.get('').map(
                       (response: Response) => {
                         return response.json().sites;
                       },
                       (error: Response) => {
                         console.log(error);
                       });
                   });
}