অক্ষরের সাথে বহনকারী টোকেন প্রেরণ


116

আমার প্রতিক্রিয়া অ্যাপ্লিকেশনটিতে আমি বিশ্রাম এপিআই অনুরোধগুলি সম্পাদন করতে অক্ষর ব্যবহার করছি ।

তবে এটি অনুরোধের সাথে অনুমোদনের শিরোনাম পাঠাতে অক্ষম ।

আমার কোডটি এখানে:

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

আমি ফাংশনটি ডাবল করেছিলাম এবং ফাংশনের পরিবর্তে এখানে টোকেন স্ট্রিং ব্যবহার করেছি, এখনও একই
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);

প্রথম প্যারামিটারটি ইউআরএল।
দ্বিতীয়টি হল JSON বডি যা আপনার অনুরোধের সাথে প্রেরণ করা হবে।
তৃতীয় প্যারামিটার হিডার (অন্যান্য জিনিসগুলির মধ্যে)। যা জেএসওএন পাশাপাশি।


4
আপনি বাহক এবং টোকেনের মধ্যে একটি জায়গা মিস করেছেন - তবে এটি কার্যকর হবে।
ডিসেম্বর

চিকিৎসকের পোস্ট: "কী:" মান "এর একটি উদ্ধৃতি রয়েছে যা মুছে ফেলা উচিত ... তবে ফিক্সিংয়ের ফলে
লেখক

1
মন্তব্য করার জন্য @ মিডিয়াগুরু থেক্স। আমি এটি স্থির করেছি (আমি মনে করি)! উক্ত উত্তরটি সম্পাদনা করে নিশ্চয়ই উক্তিটি পরিচয় করিয়ে দেওয়া হয়েছে ...
ডক্টর

2
Bearerমূলধন বি ব্যবহার করা উচিত, তাই না?
আলিজাডে 118

1
@ আলিজাডে 118 হ্যাঁ, এইচটিটিপি অনুমান অনুসারে। তবে অনেক এপিই সঠিক মূলধনের জন্য জোর দেয় না।
ওয়ানহোপি ফ্রিড

60

অক্ষের মধ্যে অনুমোদনের টোকেন সেট করার একটি অনন্য উপায়। প্রতিটি অ্যাক্সিয়াস কলটিতে কনফিগারেশন সেট করা ভাল ধারণা নয় এবং আপনি ডিফল্ট অনুমোদনের টোকেনটি এটি দ্বারা পরিবর্তন করতে পারেন:

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

সম্পাদনা করুন , জেসন নরউড-ইয়ংকে ধন্যবাদ।

কিছু এপিআই এর বাহক হিসাবে বাহক হিসাবে লেখা প্রয়োজন, যাতে আপনি এটি করতে পারেন:

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

এখন আপনার প্রতিটি এপিআইপি কলে কনফিগারেশন সেট করার দরকার নেই। এখন অনুমোদনের টোকেনটি প্রতিটি অ্যাক্সিয়াস কলটিতে সেট করা আছে।


18
Bearerকিছু এপিআইয়ের জন্য মূলধন তৈরি করা দরকার (আমি শক্ত উপায়টি আবিষ্কার করেছি)।
জেসন নরউড-ইয়ং


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

এই উদাহরণে টোকেনের মানটি কোথায় গেছে? আমার অ্যাপ্লিকেশনটির জন্য, টোকনটি সফল লগইন হওয়ার পরে শিরোনামে বা শরীরে এপিআইতে ফেরত দেওয়া হবে।
কেন

এটি এখানেheaders: {'Authorization': 'Bearer '+token}
এম.সুলমান খান

এটি যদি কোনও পোস্টের অনুরোধ হয় তবে কীভাবে ডেটা পাস করবেন
এমসুলমান খান

যারা টোকেনের মানটি কোথায় যেতে পারে তা ভাবছেন তাদের জন্য এখানে এস 6 বাক্য গঠন রয়েছে -const instance = (token) => axios.create({ baseURL: `${config.API_URL}`, timeout: 1000, headers :{ 'authorization': 'Bearer ' + token } })
জিত

18

এক্সিয়োস ইন্টারসেপ্টার ব্যবহার করে:

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
অক্ষের সাহায্যে শিরোনামগুলি কনফিগার করার জন্য এটি কি সম্প্রদায়ের মান?
সার্ভেন্ট

@ 5 সার্ভেন্ট আমি এই পদ্ধতির ব্যবহার করে সত্যই কুৎসিত সময় কাটিয়েছি। এটি অনেক ব্যথা হয়েছিল এবং তাই আমি এটির প্রস্তাব দিই না।
ankush981

@ ankush981 এই পদ্ধতির সম্পর্কে এত খারাপ কী এবং আপনি কোনটি প্রস্তাব দিচ্ছেন?
নেনাড কাভিক

1
@ নেনাডক্যাভিক একটি বিশেষ ব্যবহারের কেস রয়েছে যা আমি কভার করার চেষ্টা করছিলাম (প্রতিক্রিয়া বাধা): যখন সার্ভার প্রতিক্রিয়াতে 403 বলে তখন ব্যবহারকারীকে জানানো। লোকেরা সাধারণত লোডের সময় টোকেন যাচাইকরণের পদক্ষেপ রাখে, তবে ধরুন আপনার টোকেন যাচাই হওয়ার কয়েক সেকেন্ড পরে অকার্যকর হয়ে গেছে (যে কোনও কারণে)। এখন যখন ব্যক্তিটি একটি বোতাম টিপবে, আমি তাদের সাইন আউট হয়ে গেছে তা জানতে চাই। ইন্টারসেপ্টর ব্যবহার করে এটি করা কঠিন কারণ তারা বিশ্বব্যাপী আচরণ যুক্ত করে। আমি পুনরায় লোড লুপে উঠলাম কারণ অনুরোধ ইন্টারসেপ্টর সর্বদা টোকেন যুক্ত করবে এবং প্রতিক্রিয়া ইন্টারসেপ্টর পুনর্নির্দেশ করবে
ankush981

@ নেনাডক্যাভিক সুতরাং, সম্ভবত প্রবাহটি অর্জন করা শক্ত ছিল বা আমি ভুল পদ্ধতির ব্যবহার করছি, তবে তখন থেকেই আমি একধরনের বিরক্তিকরকে ঘৃণা করতে শুরু করি।
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

এটি কাজ করে এবং আমার একবারে টোকেনটি সেট করা দরকার app.js:

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

তারপরে আমি আবার শিরোনামটি সেট না করেই আমার উপাদানগুলিতে অনুরোধ করতে পারি।

"axios": "^0.19.0",


আমি জানি না তবে এইভাবে এটি আইওএস ডিভাইসে
সাফারিটিতে

0

axiosনিজেই দুটি দরকারী "পদ্ধতি" নিয়ে আসে interceptorsযা অনুরোধ এবং প্রতিক্রিয়াটির মধ্যে মিডলওয়্যারগুলি ছাড়া আর কিছুই নয়। সুতরাং যদি প্রতিটি অনুরোধে আপনি টোকেনটি প্রেরণ করতে চান। ব্যবহার করুন interceptor.request

আমি আপনাকে প্রস্তুত করতে সহায়তা করেছিলাম:

$ npm i axios-es6-class

এখন আপনি ক্লাস হিসাবে অক্ষ ব্যবহার করতে পারেন

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

আমিও এর মুখোমুখি হয়েছি। আপনি যে টোকেনটি দিয়ে যাচ্ছেন তা সঠিক নয়।

কেবলমাত্র হার্ডকোড টোকেন এবং পাস করুন, আপনি সঠিক প্রতিক্রিয়া পাবেন। তবে যদি টোকেনটি একক উদ্ধৃতিতে পাস করা হয় না 'তবে তা অবশ্যই ব্যর্থ হবে। এটি অবশ্যই 'অনুমোদনের' ফর্ম্যাটে থাকতে হবে: 'বেয়ারার YzE5ZTdiMjVlYzM5NjA2MGJkZTM5NjVlOTQ5YMmQ5ZjMWYjA0YmEzZmZjN2I1MmI4MDJkNQ' যেখানে বেয়ারের পরে একটি স্থান অবশ্যই উপস্থিত থাকতে হবে, এটিও একক গুরুত্বপূর্ণ।

var token = "YzE5ZTdiMjVlYzM5NjA2MGJkZTM5NjVlOTQ5YMmQ5ZjMwYjA0YmEzZmZjN2I1MmI4MDJkNQ";

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

আইএমপি: উপরের কোডটি কাজ করবে তবে আপনি যদি কিছু পোস্ট করেন তবে:

'অনুমোদন': 'বাহক' + 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.