web-dev-qa-db-ja.com

axiosでベアラートークンを送信する

私の反応アプリでは、 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エラー応答があります。

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

バックエンドから。

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

reactjsresttokenaxiosaccess-token
54
rakibtg
var config = {
    headers: {'Authorization': "bearer " + token}
};

var bodyParameters = {
   key: "value"
}

Axios.post( 
  'http://localhost:8000/api/v1/get_token_payloads',
  bodyParameters,
  config
).then((response) => {
  console.log(response)
}).catch((error) => {
  console.log(error)
});

最初のパラメーターはURLです。
2番目は、リクエストに沿って送信されるJSONボディです。
3番目のパラメーターはヘッダーです（他のものもあります）。 JSONも同様です。

55
Doctor

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

const axios = require('axios');
axios.defaults.baseURL = 'http://localhost:1010/'
axios.defaults.headers.common = {'Authorization': `bearer ${token}`}
export default axios;

編集

一部のAPIでは、bearerをBearerとして記述する必要があるため、次のことができます。

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

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

27
Ilyas karim

axios.postの2番目のパラメーターはdataです（configではありません）。 configは3番目のパラメーターです。詳細はこちらをご覧ください： https://github.com/mzabriskie/axios#axiosposturl-data-config

22
Nick Uraltsev

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

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

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

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);
  }
);
10
aneesh

このコードを試すために、ヘッダーにトークンを渡した後に何らかのデータが必要な場合

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)
});
5
Neel Patel

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

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

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

"axios": "^0.19.0",

0
gdfgdfg