在Ionic中解码令牌JWT

时间:2018-11-06 02:25:55

标签: angular ionic-framework jwt

我正在尝试从ws获取未编码的令牌,但是我没有成功。令牌是JWT。 ws返回给我的令牌如下:

{\"token\":\"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJDb2RpZ28iOiIxMTY4IiwiVXN1YXJpbyI6IjU0MDMyIiwiUGFzc3dvcmQiOiJmZGM3OTZlNzkwMjk2NTdjZGE2YjY1OWQ3NjI0MjAyYSIsIk5vbWJyZXMiOiJEYW5pbG8gRXN0dWFyZG8iLCJBcGVsbGlkb3MiOiJJdHplcCBMdW5hIiwiTm9tYnJlQ29tcGxldG8iOiJEYW5pbG8gRXN0dWFyZG8gSXR6ZXAgTHVuYSIsIlRva2VuIjoiNzQ1QzMzNjktMUUwMy00QTJBLTk1Q0YtMzI4NTZGRUU0MEQ2Iiwic3RhdHVzIjoiT0siLCJuYmYiOjE1NDE0NDkzOTcsImV4cCI6MTU0MTQ1MTE5NywiaWF0IjoxNTQxNDQ5Mzk3LCJpc3MiOiJodHRwOi8vbG9jYWxob3N0OjQ5OTc1LyIsImF1ZCI6Imh0dHA6Ly9sb2NhbGhvc3Q6NDk5NzUvIn0.aZA9yOosJzQqZdpMkYtzIHOj3oqYv5tU_qffVyIXOkg\"}

我只需要以下代码,没有对角线:

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJDb2RpZ28iOiIxMTY4IiwiVXN1YXJpbyI6IjU0MDMyIiwiUGFzc3dvcmQiOiJmZGM3OTZlNzkwMjk2NTdjZGE2YjY1OWQ3NjI0MjAyYSIsIk5vbWJyZXMiOiJEYW5pbG8gRXN0dWFyZG8iLCJBcGVsbGlkb3MiOiJJdHplcCBMdW5hIiwiTm9tYnJlQ29tcGxldG8iOiJEYW5pbG8gRXN0dWFyZG8gSXR6ZXAgTHVuYSIsIlRva2VuIjoiNzQ1QzMzNjktMUUwMy00QTJBLTk1Q0YtMzI4NTZGRUU0MEQ2Iiwic3RhdHVzIjoiT0siLCJuYmYiOjE1NDE0NDkzOTcsImV4cCI6MTU0MTQ1MTE5NywiaWF0IjoxNTQxNDQ5Mzk3LCJpc3MiOiJodHRwOi8vbG9jYWxob3N0OjQ5OTc1LyIsImF1ZCI6Imh0dHA6Ly9sb2NhbGhvc3Q6NDk5NzUvIn0.aZA9yOosJzQqZdpMkYtzIHOj3oqYv5tU_qffVyIXOkg

这是令牌获得的功能:

this.webService.doLogin(body)
    .then((response) => {
      this.jsonToken = jwt_decode(response.data);
      this.nativeStorage.set("json", this.jsonToken );
      this.toasNative.show(JSON.parse(this.jsonToken) , "3000", "bottom").subscribe();   
      this.navCtrl.push(HomePage);
    }).catch((error) => {
      this.toasNative.show(error, "3000", "bottom").subscribe();
    });

我正在使用图书馆import * as jwt_decode from "jwt-decode";

如果令牌是我用JSON.stringify()保存的,则结果是它将反对角线添加到代码中。

this.jsonToken = JSON.stringify(response.data);
this.nativeStorage.set("json", this.jsonToken);
this.toasNative.show(this.jsonToken, "3000", "bottom").subscribe();

"\"{\\\"token\\\":"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJDb2RpZ28iOiIxMTY4IiwiVXN1YXJpbyI6IjU0MDMyIiwiUGFzc3dvcmQiOiJmZGM3OTZlNzkwMjk2NTdjZGE2YjY1OWQ3NjI0MjAyYSIsIk5vbWJyZXMiOiJEYW5pbG8gRXN0dWFyZG8iLCJBcGVsbGlkb3MiOiJJdHplcCBMdW5hIiwiTm9tYnJlQ29tcGxldG8iOiJEYW5pbG8gRXN0dWFyZG8gSXR6ZXAgTHVuYSIsIlRva2VuIjoiNzQ1QzMzNjktMUUwMy00QTJBLTk1Q0YtMzI4NTZGRUU0MEQ2Iiwic3RhdHVzIjoiT0siLCJuYmYiOjE1NDE0NDkzOTcsImV4cCI6MTU0MTQ1MTE5NywiaWF0IjoxNTQxNDQ5Mzk3LCJpc3MiOiJodHRwOi8vbG9jYWxob3N0OjQ5OTc1LyIsImF1ZCI6Imh0dHA6Ly9sb2NhbGhvc3Q6NDk5NzUvIn0.aZA9yOosJzQqZdpMkYtzIHOj3oqYv5tU_qffVyIXOkg\\\"}\"

也可以尝试这种方式,但是它会返回解码后的令牌:

this.jsonToken = jwt_decode(response.data);
this.toasNative.show(JSON.stringify(this.jsonToken) , "3000", "bottom").subscribe();

{
  "Codigo": "1168",
  "Usuario": "54032",
  "Password": "fdc796e79029657cda6b659d7624202a",
  "Token": "745C3369-1E03-4A2A-95CF-32856FEE40D6",
  "status": "OK",
  "nbf": 1541449397,
  "exp": 1541451197,
  "iat": 1541449397,
  "iss": "http://localhost:49975/",
  "aud": "http://localhost:49975/"
}

也可以尝试这种方法,但是它返回SyntaxError Unexpected token o in JSON at position 1

 this.jsonToken = jwt_decode(response.data);
      this.nativeStorage.set("json", this.jsonToken );
      this.toasNative.show(JSON.parse(this.jsonToken) , "3000", "bottom").subscribe();   

更新。这是我的组件:

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { HomePage } from '../home/home';  
import { Storage } from '@ionic/storage';
import { ServiceProvider } from '../../providers/service/service';

import { Toast } from '@ionic-native/toast';
import * as jwt_decode from "jwt-decode";

@IonicPage()
@Component({
  selector: 'page-login',
  templateUrl: 'login.html',
})
export class LoginPage {
  paginaprincipal: any = HomePage;
  loading: any;
  jsonToken: any;

  constructor(public navCtrl: NavController,
    public navParams: NavParams,
    private webService: ServiceProvider,
    private nativeStorage: Storage,
    private toasNative: Toast) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad LoginPage');
  }

  doLogin() {
    const body = {
      Codigo: "1168",
      Usuario: "54032",
      Password: "01992004"
    };

    this.webService.doLogin(body)
    .then((response) => {
      //this.jsonToken = jwt_decode(response.data);
      var parse = JSON.parse(response.data);
      this.nativeStorage.set("json", parse);
      this.toasNative.show("Response with JSON.parse() :" + parse, "3000", "bottom").subscribe();   
      this.navCtrl.push(HomePage);
    }).catch((error) => {
      this.toasNative.show(error, "3000", "bottom").subscribe();
    });
  }
}

如果可以帮助我获得令牌,非常感谢。

1 个答案:

答案 0 :(得分:0)

您的数据似乎经过了双重编码。

一种快速解决方案是对其进行双重解码,即

JSON.parse(JSON.parse(response.data)).token

但是,我建议您查看一下它的后端,弄清楚为什么首先要对它进行双重编码。