Axiosで無記名トークンを送信する


116

私の反応アプリでは、axiosを使用してREST apiリクエストを実行しています。

ただし、リクエストとともにAuthorizationヘッダーを送信することはできません。

これが私のコードです:

tokenPayload() {
  let config = {
    headers: {
      'Authorization': 'Bearer ' + validToken()
    }
  }
  Axios.post( 
      'http://localhost:8000/api/v1/get_token_payloads',
      config
    )
    .then( ( response ) => {
      console.log( response )
    } )
    .catch()
}

ここでは、validToken()メソッドは単純にブラウザストレージからトークンを返します。

すべてのリクエストには、500エラー応答があり、

リクエストからトークンを解析できませんでした

バックエンドから。

各リクエストで認証ヘッダーを送信する方法は?反応する他のモジュールをお勧めしますか?


私はそれがまったくaxios問題だとは思いません。validToken()関数をチェックすると、サーバーが理解できないものを返します。
xiaofan2406 16

私は関数をダブルチェックし、関数の代わりにここでもトークン文字列を使用しましたが、それでも同じです
rakibtg

回答:


139
const config = {
    headers: { Authorization: `Bearer ${token}` }
};

const bodyParameters = {
   key: "value"
};

Axios.post( 
  'http://localhost:8000/api/v1/get_token_payloads',
  bodyParameters,
  config
).then(console.log).catch(console.log);

最初のパラメーターはURLです。
2番目は、リクエストとともに送信されるJSONボディです。
3番目のパラメーターはヘッダーです(とりわけ)。これもJSONです。


4
無記名とトークンの間のスペースを逃しました-それは動作します。
2018年12

医師のポスト:「キー: 『の値は』削除すべき引用符を持っている...しかし、私のために仕事に認証を取得した固定が反応し、ネイティブアプリ。
mediaguru

1
@mediaguru Thxのコメント。修正しました(たぶん)!引用は誰かが回答を編集することによって紹介されたに違いありません...
Doctor

2
Bearer大文字Bで使用する必要がありますか?
Alizadeh118

1
@ Alizadeh118はい、HTTP仕様によると。しかし、多くのAPIは正しい大文字表記を要求しません。
OneHoopyFrood

60

これはaxiosで認証トークンを設定するユニークな方法です。すべてのaxios呼び出しに構成を設定することはお勧めできません。次の方法でデフォルトの認証トークンを変更できます。

import axios from 'axios';
axios.defaults.baseURL = 'http://localhost:1010/'
axios.defaults.headers.common = {'Authorization': `bearer ${token}`}
export default axios;

編集、ジェイソン・ノーウッド・ヤングに感謝します。

一部のAPIでは、ベアラーをベアラーとして作成する必要があるため、次のことができます。

axios.defaults.headers.common = {'Authorization': `Bearer ${token}`}

これで、すべてのAPI呼び出しに構成を設定する必要がなくなりました。これで、認証トークンがすべてのaxios呼び出しに設定されます。


18
Bearer一部のAPIでは大文字にする必要があります(私は難しい方法を発見しました)。
Jason Norwood-Young


22

一度設定を作成すれば、どこでも使用できます。

const instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'Authorization': 'Bearer '+token}
});

instance.get('/path')
.then(response => {
    return response.data;
})

この例で渡されるトークンの値はどこにありますか?私のアプリケーションでは、ログインが成功した後、トークンはヘッダーまたは本文のいずれかでAPIに戻されます。
ケン

そのここheaders: {'Authorization': 'Bearer '+token}
M.suleman Khan

POSTリクエストの場合にデータを渡す方法
M.suleman Khan

トークンの値をどこから渡すことができるか疑問に思う方のために、ここにes6構文を示しますconst instance = (token) => axios.create({ baseURL: `${config.API_URL}`, timeout: 1000, headers :{ 'authorization': 'Bearer ' + token } })
Jeet

18

Axiosインターセプターを使用する場合:

const service = axios.create({
  timeout: 20000 // request timeout
});

// request interceptor

service.interceptors.request.use(
  config => {
    // Do something before request is sent

    config.headers["Authorization"] = "bearer " + getToken();
    return config;
  },
  error => {
    Promise.reject(error);
  }
);

1
これはaxiosでヘッダーを構成するためのコミュニティ標準ですか?
サーヴァント

@ 5ervant私はこのアプローチを使用して本当に醜い時間を過ごしました。大変な苦痛でしたので、お勧めしません。
ankush981

@ ankush981このアプローチの何がそんなに悪いのですか、どれがお勧めですか?
Nenad Kaevik

1
@NenadKaevik私がカバーしようとしていた特定のユースケースがあります(応答インターセプト):サーバーが応答で403を言ったときにユーザーに通知します。一般に、コンポーネントの読み込み中にトークンの検証手順を実行しますが、トークンが検証されてから数秒後にトークンが無効化されたとします(何らかの理由で)。今度は、ユーザーがボタンをクリックしたときに、ログアウトされていることを彼らに知らせたいのです。グローバルな動作を追加するため、インターセプターを使用してこれを行うのは困難です。リクエストインターセプターは常にトークンを追加し、レスポンスインターセプターはリダイレクトするため、リロードループに入りました
ankush981

@NenadKaevikつまり、フローを達成するのが難しいか、間違ったアプローチを使用していたのかもしれませんが、それ以来、インターセプターが嫌いになり始めました。
ankush981

9

ヘッダーにトークンを渡した後でデータを取得したい場合は、このコードを試してください

const api = 'your api'; 
const token = JSON.parse(sessionStorage.getItem('data'));
const token = user.data.id; /*take only token and save in token variable*/
axios.get(api , { headers: {"Authorization" : `Bearer ${token}`} })
.then(res => {
console.log(res.data);
.catch((error) => {
  console.log(error)
});

2

これは機能し、トークンをmyで一度だけ設定する必要がありますapp.js

axios.defaults.headers.common = {
    'Authorization': 'Bearer ' + token
};

その後、ヘッダーを再設定せずにコンポーネントでリクエストを行うことができます。

"axios": "^0.19.0",


理由はわかりませんが、この方法ではiOSデバイスのSafariでは機能しません:(
ZecKa

0

axiosそれ自体には2つの便利な「メソッド」が付属しておりinterceptors、それらは要求と応答の間のミドルウェアにすぎません。したがって、各リクエストでトークンを送信する場合。を使用しinterceptor.requestます。

私はあなたを助けるパッケージを作りました:

$ npm i axios-es6-class

これでaxiosをクラスとして使用できます

export class UserApi extends Api {
    constructor (config) {
        super(config);

        // this middleware is been called right before the http request is made.
        this.interceptors.request.use(param => {
            return {
                ...param,
                defaults: {
                    headers: {
                        ...param.headers,
                        "Authorization": `Bearer ${this.getToken()}`
                    },
                }
            }
        });

      this.login = this.login.bind(this);
      this.getSome = this.getSome.bind(this);
   }

   login (credentials) {
      return this.post("/end-point", {...credentials})
      .then(response => this.setToken(response.data))
      .catch(this.error);
   }


   getSome () {
      return this.get("/end-point")
      .then(this.success)
      .catch(this.error);
   }
}

middleware依存の実装はあなた次第です。または、独自のaxios-es6-class https://medium.com/@enetoOlveda/how-to-use-axios-typescript-like-a-pro-7c882f71e34aを作成したい場合 は、それがどこから来たのか


-4

これも私が直面したことです。uが渡したトークンが正しくありません。

トークンをハードコードしてパスするだけで、正しい応答が得られます。しかし、トークンが単一引用符 ''で渡されない場合、それは確実に失敗します。形式は「Authorization」:「Bearer YzE5ZTdiMjVlYzM5NjA2MGJkZTM5NjVlOTQ5YMmQ5ZjMwYjA0YmEzZmZjN2I1MmI4MDJkNQ」である必要があります。この場合、ベアラーの後に1つのスペースが存在する必要があります。

var token = "YzE5ZTdiMjVlYzM5NjA2MGJkZTM5NjVlOTQ5YMmQ5ZjMwYjA0YmEzZmZjN2I1MmI4MDJkNQ";

var headers = {
  Authorization: "Bearer " + token,
  Accept: "application/json, text/plain, */*",
  "Content-Type": "application/json"
};

IMP:上記のコードは機能しますが、次のようなものを投稿した場合:

'Authorization': 'ベアラー' + YzE5ZTdiMjVlYzM5NjA2MGJkZTM5NjVlOTQ5YMmQ5ZjMwYjA0YmEzZmZjN2I1MmI4MDJkNQ、失敗します

または-----以下のコードも失敗します。基本的な違いを理解できれば幸いです

var token = YzE5ZTdiMjVlYzM5NjA2MGJkZTM5NjA0YmEzZmZjN2I1MmI4MDJkNQ;

var headers = {
  Authorization: "Bearer " + token,
  Accept: "application/json, text/plain, */*",
  "Content-Type": "application/json"
};
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.