Auth0 JWT 插件和 ionic2 - 无授权标头发送

Posted 2023-03-10

【中文标题】Auth0 JWT 插件和 ionic2 - 无授权标头发送

【英文标题】：Auth0 JWT plugin and ionic2 - No Authorization header send

【发布时间】：2017-04-09 16:54:02

【问题描述】：

我在将来自 Auth0 的 JWT 令牌插件与至少 Ionic2 集成时遇到问题。我绝对没有错误，但请求是在没有授权标头的情况下发送的。我的代码：

app.module

import  NgModule  from '@angular/core';
import  IonicApp, IonicModule  from 'ionic-angular';
import  MyApp  from './app.component';
import  AboutPage  from '../pages/about/about';
import  ContactPage  from '../pages/contact/contact';
import  HomePage  from '../pages/home/home';
import  TabsPage  from '../pages/tabs/tabs';
import  LoginPage  from '../pages/login/login';
import  AuthHttp, AuthConfig  from 'angular2-jwt';
import  Storage  from '@ionic/storage';
import  Http  from '@angular/http';

import  AuthService  from '../services/auth.service';
import  NoteService  from '../services/note.service';

let storage: Storage = new Storage();

export function getAuthHttp(http) 
  return new AuthHttp(new AuthConfig(
    headerPrefix: 'JWT',
    noJwtError: true,
    globalHeaders: ['Accept': 'application/json'],
    tokenGetter: (() => storage.get('id_token')),
  ), http);


@NgModule(
  declarations: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage,
    LoginPage
  ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage,
    LoginPage
  ],
  providers: [
    AuthService,
    AuthHttp,
     
      provide: AuthHttp,
      useFactory: getAuthHttp,
      deps: [Http]
    ,
    Storage,
    NoteService,
  ]
)
export class AppModule 

我的服务：

import  Injectable  from '@angular/core';
import  Headers, Http  from '@angular/http';
import  AuthHttp  from 'angular2-jwt';
import  AppParameters  from '../parameters';
import  AuthFormModel  from '../models/authForm.model';

import 'rxjs/add/operator/toPromise';

@Injectable()
export class NoteService 
    private headers = new Headers( 'Content-Type': 'application/json' );
    private note_url: string = AppParameters.ENDPOINT_URL + '/notes/';

    private notes: any;
    constructor(private authHttp: AuthHttp) 

    getUserNotes()
        return this.authHttp.get(this.note_url);
    

以及我使用服务的组件：

import  Component  from '@angular/core';
import  NoteService  from '../../services/note.service';

import  NavController  from 'ionic-angular';



@Component(
  selector: 'page-home',
  templateUrl: 'home.html'
)
export class HomePage 

  notes: any;

  constructor(
    public navCtrl: NavController,
    public noteService: NoteService
    ) 

  ngOnInit()
    this.noteService.getUserNotes().subscribe(
            data => this.notes = data,
            err => console.log(err),
            () => 
              console.log('request complete');
              console.log(this.notes);
            
        );
  

package.json

  "name": "ionic-hello-world",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": 
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  ,
  "dependencies": 
    "@angular/common": "2.1.1",
    "@angular/compiler": "2.1.1",
    "@angular/compiler-cli": "2.1.1",
    "@angular/core": "2.1.1",
    "@angular/forms": "2.1.1",
    "@angular/http": "2.1.1",
    "@angular/platform-browser": "2.1.1",
    "@angular/platform-browser-dynamic": "2.1.1",
    "@angular/platform-server": "2.1.1",
    "@ionic/storage": "1.1.6",
    "angular2-jwt": "^0.1.25",
    "ionic-angular": "2.0.0-rc.3",
    "ionic-native": "2.2.3",
    "ionicons": "3.0.0",
    "rxjs": "5.0.0-beta.12",
    "zone.js": "0.6.26"
  ,
  "devDependencies": 
    "@ionic/app-scripts": "0.0.45",
    "typescript": "2.0.6"
  ,
  "cordovaPlugins": [
    "cordova-plugin-whitelist",
    "cordova-plugin-console",
    "cordova-plugin-statusbar",
    "cordova-plugin-device",
    "cordova-plugin-splashscreen",
    "ionic-plugin-keyboard"
  ],
  "cordovaPlatforms": [],
  "description": "noteman_js: An Ionic project"

一切正常，控制台中绝对没有错误，但标题仍然丢失。也许我忘记了什么？我尝试来自 JWT 插件的配置和来自堆栈溢出的大量配置。 顺便提一句。对不起我糟糕的英语:)

【参考方案1】：

你错过了一件事。在您的服务中，您需要将标头作为获取请求中的选项发送。

对于 authHttp 请求

通过阅读文档，我相信以下方法会起作用

github: authO/angular2-jwt

为您服务： NoteService 类应该类似于：

export class NoteService 
    private headers = new Headers( 'Content-Type': 'application/json' );
    private note_url: string = AppParameters.ENDPOINT_URL + '/notes/';

    private notes: any;
    constructor(private authHttp: AuthHttp) 

    getUserNotes()
        return this.authHttp.get(this.note_url, headers: this.headers);
    

对于默认的 Angular Http 请求

为您服务： 您将需要导入请求选项

import  Http, Headers, RequestOptions  from '@angular/http';

您的 NoteService 类应该类似于：

export class NoteService 
    private headers = new Headers( 'Content-Type': 'application/json' );
    private options = new RequestOptions( headers: this.headers );
    private note_url: string = AppParameters.ENDPOINT_URL + '/notes/';

    private notes: any;
    constructor(private http: Http) 

    getUserNotes()
        return this.http.get(this.note_url, this.options);
    

【讨论】：

不起作用。如果我从 AuthHttp 中删除 noJwtError: true, 那么我得到空的 AuthHttpError 并且根本没有请求发出。我认为问题是由 storage.get('id_token') 引起的，我不知道如何修复它。

啊……我没看到。

storage.get('id_token') 返回一个承诺而不是一个值。所以你必须使用 .then((val)=> //val 是你需要的实际值 )

已修复，离子文档中存在错误。在 storage.set 所在的示例中，他们同步使用此函数，但它是异步函数。

能否请您发布代码如何从令牌中获取价值，因为我在过去 5 天都在与此作斗争，我觉得很愚蠢:) 这是我的代码：tokenGetter: (() => getToken()), 导出函数 getToken() return new Promise((resolve, reject)=> storage.get('token').then((token) => console.log(token); resolve(token) ) ) .catch((err) => reject(err) console.error("token errrrorrrr",err); ); )

【参考方案2】：

只需使用 window.localStorage 代替离子存储：

export function getAuthHttp(http) 
  return new AuthHttp(new AuthConfig(
    globalHeaders: ['Accept': 'application/json'],
    //tokenGetter: (() => storage.get('id_token').then((val)=>return val) ),
    tokenGetter: (() => JSON.parse(window.localStorage.getItem("id_token"))),
    noJwtError: true,
    headerPrefix: "JWT",
  ), http);

据我所知，auth0 sdk 并没有使用 Ionic 存储来存储 id_token ......它只是使用 window.localStorage，所以你也可以使用它，它是一种同步方法，因此可以避免这种情况承诺的东西。