Axios: प्रत्येक अनुरोध पर प्रमाणीकरण शीर्षलेख अद्यतन कर रहा है?

मेरे पास एक समान उपयोग का मामला है जहां यह बहुत अच्छा होगा यदि पारित हेडर का मूल्यांकन प्रत्येक अनुरोध के लिए आलसी मूल्यांकन किया जाएगा।

सोच:
हेडर हैश को ऑब्जेक्ट के रूप में उत्सुकता से पास करने के बजाय ( axios.create({headers: {...}}) हम एक फ़ंक्शन पास कर सकते हैं जो हेडर ( axios.create({headers: () => {...}} ) लौटाता है जिसका मूल्यांकन अनुरोध भेजे जाने से पहले किया जाएगा।

तुम क्या सोचते हो?
संपादित करें: यह एक प्रस्ताव है, मुझे नहीं लगता कि यह इस समय काम करता है।

मैं उसी उपयोग के मामले में भाग गया। मैंने अल्पावधि में जो किया वह transformRequest फ़ंक्शन का उपयोग कर रहा था। निश्चित रूप से एक हैक और कोडबेस में उचित आलसी-लोडिंग दृष्टिकोण को लागू करने में सहायता करना अच्छा लगेगा।

कोड स्निपेट के लिए नीचे देखें। auth() उपलब्ध होने पर उपयोगकर्ता के टोकन में लॉग इन हो जाता है।

let HTTP = axios.create({
  baseURL: baseurl,
  transformRequest: [function (data, headers) {
    headers['Authorization'] = auth()
    return JSON.stringify(data)
  }],
  headers: {
    'Content-Type': 'application/json'
  }
})

मैंने इसके लिए इंटरसेप्टर का इस्तेमाल किया है। अगर अनुरोध का मूल यूआरएल मेरे एपीआई के लिए है तो मैं ऑथ हेडर जोड़ता हूं (तृतीय पक्षों को प्रमाण-पत्र भेजने से रोकने के लिए)। यह प्रत्येक अनुरोध पर चलाया जाता है, इसलिए यदि टोकन बदलता है (उदाहरण के लिए टोकन रीफ्रेश के परिणामस्वरूप) तो अगला अनुरोध नया टोकन उठाता है। मैं यह भी सुनिश्चित करता हूं कि कॉल साइट से हेडर को ओवरराइड करने की अनुमति देने के अनुरोध में मैं मौजूदा मूल्यों की जांच करता हूं, यदि यह किसी भी कारण से आवश्यक हो।

axios.interceptors.request.use(
  config => {
    if (config.baseURL === baseApiAddress && !config.headers.Authorization) {
      const token = getToken();

      if (token) {
        config.headers.Authorization = `Bearer ${token}`;
      }
    }

    return config;
  },
  error => Promise.reject(error)
);

@mattstrayer क्या आप मुझे getToken() विधि दिखा सकते हैं? क्या आप अपने टोकन को लोकलस्टोरेज या एसिंक्सस्टोरेज (रिएक्ट नेटिव) में स्टोर करते हैं? अग्रिम में धन्यवाद!

मैं इसके साथ समाप्त हुआ।

axios.create({
  baseURL: '<your-api>',
  headers: {
    Authorization: {
      toString () {
        return `Bearer ${localStorage.getItem('token')}`
      }
    }
  }
})

मुझे यकीन नहीं है कि यह किसी भी मामले के लिए काम करता है।

मेरी http.js फ़ाइल:

import axios from 'axios';
import {store} from './store';

const http = axios.create ({
  baseURL: process.env.VUE_APP_ROOT_API,
  timeout: 1000,
  headers: {'Content-Type': 'application/json'},
});

http.interceptors.request.use (
  function (config) {
    const token = store.token;
    if (token) config.headers.Authorization = `Bearer ${token}`;
    return config;
  },
  function (error) {
    return Promise.reject (error);
  }
);

export default http;

मेरा स्टोर, एक साधारण गेट/सेट "क्लास"

export const store = {
    _username: '',
    _email: '',
    _token: '',

    isLogged () {
      return this.token
    },

    set username (str) {
      this._username = str
      localStorage.setItem('username',str)
    },
    get username () {
      return this._username || localStorage.getItem('username')
    },

    set email (str) {
      this._email = str
      localStorage.setItem('email',str)
    },
    get email () {
      return this._email || localStorage.getItem('email')
    },

    set token (str) {
      this._token = str
      localStorage.setItem('token',str)
    },
    get token () {
      return this._token || localStorage.getItem('token')
    }

  }

मेरी उपयोगकर्ता सेवा "वर्ग":

import http from './http'

export const user = {
  ping: () => http.get('/users/ping'),
  save: (user) => http.post('/users', user)
}

और अंत में, मेरा कार्यान्वयन:

import {user} from '@/services'

 user.ping().then( r => {
      console.log(r.data)
    })

btw, process.env.VUE_APP_ROOT_API और @/services Vue चीजें हैं...

परिणाम:

@danielschmitz उस उदाहरण के लिए धन्यवाद !!

ऐसा लगता है कि आपने इसे समझ लिया है और यह कोई बग नहीं है, इसलिए मैं इसे बंद कर रहा हूं

एपीआई कॉल ट्रिगर होने से पहले मेरा टोकन सेट किया गया था, यह सुनिश्चित करने के लिए मैंने इंटरसेप्टर को एसिंक/प्रतीक्षा में लपेटना उपयोगी पाया:

http.interceptors.request.use (
  async (config) => {
    const token = await getToken(); // slightly longer running function than example above
    if (token) config.headers.Authorization = `Bearer ${token}`;
    return config;
  },
  (error) => {
    return Promise.reject (error);
  }
);

मैंने इसके लिए इंटरसेप्टर का इस्तेमाल किया है। अगर अनुरोध का मूल यूआरएल मेरे एपीआई के लिए है तो मैं ऑथ हेडर जोड़ता हूं (तृतीय पक्षों को प्रमाण-पत्र भेजने से रोकने के लिए)। यह प्रत्येक अनुरोध पर चलाया जाता है, इसलिए यदि टोकन बदलता है (उदाहरण के लिए टोकन रीफ्रेश के परिणामस्वरूप) तो अगला अनुरोध नया टोकन उठाता है। मैं यह भी सुनिश्चित करता हूं कि कॉल साइट से हेडर को ओवरराइड करने की अनुमति देने के अनुरोध में मैं मौजूदा मूल्यों की जांच करता हूं, यदि यह किसी भी कारण से आवश्यक हो।

axios.interceptors.request.use(
  config => {
    if (config.baseURL === baseApiAddress && !config.headers.Authorization) {
      const token = getToken();

      if (token) {
        config.headers.Authorization = `Bearer ${token}`;
      }
    }

    return config;
  },
  error => Promise.reject(error)
);

इंटरसेप्टर सबसे सुंदर समाधान की तरह लगता है