अक्षतंतु के साथ वाहक टोकन भेजना

Question

मेरे रिएक्शन ऐप में मैं REST एपि अनुरोध करने के लिए axios का उपयोग कर रहा हूं ।

लेकिन यह अनुरोध के साथ प्राधिकरण शीर्ष लेख भेजने में असमर्थ है ।

यहाँ मेरा कोड है:

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 त्रुटि प्रतिक्रिया दे रहे हैं

टोकन अनुरोध से पार्स नहीं किया जा सका

बैक-एंड से।

प्रत्येक अनुरोध के साथ प्राधिकरण हेडर कैसे भेजें? क्या आप प्रतिक्रिया के साथ किसी अन्य मॉड्यूल की सिफारिश करेंगे?

Comments

मुझे नहीं लगता कि इसका कोई axiosमुद्दा है। अपने validToken()फ़ंक्शन की जाँच करें , यह यह कहकर वापस लौटता है कि आपका सर्वर समझ नहीं रहा है।

— xiaofan2406

मैंने फ़ंक्शन को डबल चेक किया और फ़ंक्शन के बजाय यहां टोकन स्ट्रिंग का भी उपयोग किया, फिर भी वही है

— rakibtg

Answer 1

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 है।
दूसरा JSON बॉडी है जिसे आपके अनुरोध पर भेजा जाएगा।
तीसरा पैरामीटर हेडर (अन्य चीजों के बीच) हैं। जो JSON भी है।

Comments

आप वाहक और टोकन के बीच एक स्थान चूक गए - फिर यह काम करेगा।

— दिसम्बर

डॉक्टर का पद: "कुंजी:" मान "में एक उद्धरण है जिसे हटा दिया जाना चाहिए ... लेकिन यह तय करना कि मेरे प्रतिक्रिया-मूल ऐप के लिए काम करने के लिए

— ऑर्गॅज़म मिले

टिप्पणी के लिए @mediaguru Thx मैंने इसे ठीक किया (मुझे लगता है)! उद्धरण किसी व्यक्ति द्वारा उत्तर को संपादित करने के लिए पेश किया गया होगा ...

— डॉक्टर

Bearerराजधानी बी के साथ इस्तेमाल किया जाना चाहिए, है ना?

— अलीजादेह 118

@ अलीज़ादेह 118 हाँ, एचटीटीपी युक्ति के अनुसार। लेकिन कई एपि सही पूंजीकरण पर जोर नहीं देते हैं।

— OneHoopyFrood

Answer 2

यहाँ 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 कॉल के लिए कॉन्फ़िगरेशन सेट करने की आवश्यकता नहीं है। अब प्राधिकरण टोकन प्रत्येक अक्षीय कॉल पर सेट है।

Comments

Bearerकुछ एपीआई के लिए पूंजीकृत करने की आवश्यकता है (मैंने कठिन तरीका खोजा)।

— जेसन नोरवुड-यंग

Answer 3

का दूसरा पैरामीटर axios.postहै data(नहीं config)। configतीसरा पैरामीटर है। कृपया इसे विवरण के लिए देखें: https://github.com/mzabriskie/axios#axiosposturl-data-connig

Answer 4

आप एक बार विन्यास बना सकते हैं और हर जगह इसका उपयोग कर सकते हैं।

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

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

Comments

इस उदाहरण में टोकन का मूल्य कहां से पारित किया गया है? मेरे आवेदन के लिए, टोकन एक सफल लॉगिन के बाद हेडर या बॉडी में या तो एपी को वापस पारित कर दिया जाएगा।

— केन

यहाँheaders: {'Authorization': 'Bearer '+token}

— एम

यदि यह POST अनुरोध है, तो डेटा कैसे पास किया जाएगा

— एम। फूल्समैन खान

जो लोग सोच रहे हैं कि टोकन का मूल्य कहाँ से पारित किया जा सकता है, यहाँ es6 वाक्य रचना है -const instance = (token) => axios.create({ baseURL: `${config.API_URL}`, timeout: 1000, headers :{ 'authorization': 'Bearer ' + token } })

— जीत

Answer 5

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

Comments

क्या कुल्हाड़ियों के साथ हेडर को कॉन्फ़िगर करने के लिए यह सामुदायिक मानक है?

— 5ervant

@ 5ervant मेरे पास इस दृष्टिकोण का उपयोग करके वास्तव में बदसूरत समय था। यह बहुत दर्द था और मैं इसकी सिफारिश नहीं करता।

— अंकुश 981

@ akush981 इस दृष्टिकोण के बारे में क्या बुरा है और आप किसको सलाह देते हैं?

— नेनाद काविक

@NenadKaevik एक विशेष उपयोग मामला है जिसे मैं कवर करने की कोशिश कर रहा था (प्रतिक्रिया अवरोधन): उपयोगकर्ता को यह बताने की अनुमति देता है कि सर्वर प्रतिक्रिया में 403 कहता है। लोग आमतौर पर घटक लोड के दौरान एक टोकन सत्यापन चरण डालते हैं, लेकिन मान लें कि आपके टोकन को सत्यापित होने के बाद कुछ सेकंड के लिए अमान्य कर दिया गया था (जो कुछ भी)। अब जब वह व्यक्ति एक बटन क्लिक करता है, तो मैं उन्हें यह जानना चाहूंगा कि उन्हें साइन आउट कर दिया गया है। इंटरसेप्टर का उपयोग करके ऐसा करना कठिन है क्योंकि वे वैश्विक व्यवहार को जोड़ते हैं। मैं पुनः लोड लूप में आ गया क्योंकि अनुरोध इंटरसेप्टर हमेशा टोकन जोड़ता था और प्रतिक्रिया इंटरसेप्टर पुनर्निर्देशित करता था

— akush981

@NenadKaevik तो, शायद प्रवाह को प्राप्त करना कठिन था या मैं गलत दृष्टिकोण का उपयोग कर रहा था, लेकिन तब से मैं इंटरसेप्टर्स से नफरत करना शुरू कर दिया।

— अंकुश

Answer 6

यदि आप हेडर में टोकन पास करने के बाद कुछ डेटा चाहते हैं ताकि इस कोड को आज़माएं

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

Answer 7

यह काम करता है और मुझे केवल एक बार टोकन सेट करने की आवश्यकता है app.js:

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

फिर मैं हेडर को फिर से सेट किए बिना अपने घटकों में अनुरोध कर सकता हूं।

"axios": "^0.19.0",

Comments

मुझे पता नहीं क्यों लेकिन इस तरह से यह आईओएस डिवाइस पर सफारी पर काम नहीं करता है :(

— ZecKa

Answer 8

axiosअपने आप में दो उपयोगी "तरीकों" के साथ आता है 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-7c882f713434a बनाना चाहते हैं, तो यह माध्यम है पोस्ट जहां से आया है

Answer 9

यह वही है जो मैंने भी सामना किया। जो टोकन यू से गुजर रहा है वह सही नहीं है।

बस हार्डकोड टोकन और पास, आपको सही प्रतिक्रिया मिलेगी। लेकिन यदि एकल उद्धरण '' में टोकन पारित नहीं किया जाता है, तो यह निश्चित रूप से विफल हो जाएगा। यह प्रारूप 'प्राधिकरण' में होना चाहिए: 'बेयरर YzE5ZTdiMjVlYzM5NjA2MGJkZTM5NjVlOTQ5YMmQ5ZjMwYwAA0YmEzZmZjN2I1MmI4MDJkNQ', जहाँ 'भालू' के बारे में बताया जा रहा है।

var token = "YzE5ZTdiMjVlYzM5NjA2MGJkZTM5NjVlOTQ5YMmQ5ZjMwYjA0YmEzZmZjN2I1MmI4MDJkNQ";

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

छोटा सा भूत: उपरोक्त कोड काम करेगा लेकिन अगर यू कुछ पोस्ट करते हैं:

'प्राधिकरण': 'बियरर' + YzE5ZTdiMjVlYzM5NjA2MGJkZTM5NjVlOTQ5YMmQ5ZjMwYjA0mEzZmZjN2I1MmI4MDJkNQ, यह विफल हो जाएगा

या ----- नीचे दिया गया कोड भी विफल हो जाएगा, मुझे आशा है कि यू मूल अंतर को समझेंगे

var token = YzE5ZTdiMjVlYzM5NjA2MGJkZTM5NjA0YmEzZmZjN2I1MmI4MDJkNQ;

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