2017-12-27 34 views
9

में मैंने अक्षीय इंटरसेप्टर बनाया है जो हर अनुरोध को मेरे बाकी एपीआई को भेजने से पहले टोकन जोड़ने के लिए ज़िम्मेदार है।एक्सिस इंटरसेप्टर टोकन हेडर कॉन्फ़िगरेशन में मौजूद है लेकिन अनुरोध हेडर

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

export default function execute() { 
    axios.interceptors.request.use(function(config) { 
     const token = store.state.token; 
     if(token) { 
      config.headers.Authorization = `Bearer ${token}`; 
      console.log(config); 
      return config; 
     } else { 
      console.log('There is not token yet...'); 
      return config; 
     } 
    }, function(err) { 
     return Promise.reject(err); 
    }); 
} 

आप लाइन 2 मैं vuex भंडारण का आयात कर रहा हूँ में देख सकते हैं और यह वास्तव में जगह है जहाँ मेरे टोकन जमा किया जाता है के रूप में। लाइन 8 में मैं वास्तव में इस टोकन को config ऑब्जेक्ट में जोड़ रहा हूं और फिर अगली पंक्ति में मैं इसे सांत्वना दे रहा हूं।

यह मेरी main.js में मार डाला जाता है ताकि जैसे फाइल:

import interceptor from './helpers/httpInterceptor.js'; 
interceptor(); 

टोकन config वस्तु जो मैं अपने कंसोल में देखते हैं (क्योंकि मैं config वस्तु को सांत्वना दी) में मौजूद है:

img

यह हर बार चलता है जब मैं उम्मीद के अनुसार API को आराम करने का कुछ अनुरोध करता हूं। यदि टोकन मौजूद है (लॉगिन के बाद) इसे प्रत्येक अनुरोध में टोकन हेडर जोड़ना चाहिए। दुर्भाग्य से यह इसे जोड़ नहीं है हालांकि यह कॉन्फ़िगरेशन ऑब्जेक्ट पर मौजूद है जो मुझे थोड़ा उलझन में डाल देता है।

यह वास्तव में वास्तविक अनुरोध करने के लिए टोकन नहीं जोड़ता है के रूप में मैं नेटवर्क टैब में देख सकते हैं:

imgd

यह स्क्रीनशॉट प्रवेश के बाद लिया निश्चित रूप से है, इसलिए टोकन vuex भंडारण में पहले से ही है और यह सांत्वना दी लॉगआउट फ़ंक्शन निष्पादित करने के बाद आउट कॉन्फ़िगरेशन (इंटरसेप्टर का हिस्सा) (जो बाकी एपीआई कॉल करता है)।

परिणामस्वरूप मेरे पास मेरे बाकी एपीआई से प्रतिक्रिया में 400 (खराब अनुरोध) स्थिति है क्योंकि मैंने टोकन नहीं भेजा था।

संपादित करें !!!

मैं सोच रहा था कि इसे बेहतर बनाने के लिए मैं इस प्रश्न में क्या जोड़ सकता हूं। मुझे लगता है कि डेमो प्लंकर बनाना असंभव है इसलिए मैंने थोड़ा repository डेमो बनाने का निर्णय लिया जिसे आप डाउनलोड कर सकते हैं और अपनी आंखों के लिए समस्या देख सकते हैं। मुझे उम्मीद है कि यह समस्या को हल करने में मदद करेगा!

+0

क्या मुझे इस बारे में जानकारी जोड़नी चाहिए कि मैं वूक्स स्टोरेज में टोकन संग्रहीत कैसे कर रहा हूं? मुझे नहीं पता कि यह मेरे मुद्दे के लिए प्रासंगिक हो सकता है या नहीं। – BT101

+0

क्या आप टोकन को हार्ड कोड कर सकते हैं और देख सकते हैं कि यह काम करता है या नहीं? –

+0

दुर्भाग्य से यह कुछ भी नहीं बदला है, फिर भी जब मैं इंटरसेप्टर में हार्ड कोड टोकन करता हूं तो यह वही व्यवहार होता है। – BT101

उत्तर

3

मुझे यह पता चला।

मुझे नहीं पता था कि प्रीफलाइट अनुरोध कहा जाता है जिसे एपीआई को आराम देने के वास्तविक अनुरोध से पहले निष्पादित किया जाता है। अगर प्रीफलाइट अनुरोध विफल रहता है तो यह अधिक हेडर स्वीकार नहीं करेगा/प्राप्त नहीं करेगा। यही कारण है कि मैंने इसे क्रोम कंसोल नेटवर्क टैब में वास्तविक अनुरोध पर नहीं देखा, लेकिन यह कॉन्फ़िगरेशन ऑब्जेक्ट में था जो इंटरसेप्टर में console.log एड था।

रिपोजिटरी डेमो में वही जो मौजूदा यूआरएल नहीं बुला रहा था, इसलिए प्रीफलाइट अनुरोध भी विफल रहा। इस डेमो को बनाने के दौरान मुझे नहीं पता था कि प्रीफलाइट अनुरोध जैसी चीज मौजूद है इसलिए मुझे यकीन था कि इससे कोई फर्क नहीं पड़ता कि मैं कुछ मौजूदा यूआरएल एंडपॉइंट या कल्पित व्यक्ति को फोन करूंगा, मैंने सोचा कि दोनों तरह से मुझे देखने में सक्षम होना चाहिए वहां हेडर का अनुरोध करें।

संबंधित मुद्दे