การส่งโทเค็นผู้ถือด้วย axios

ในแอปตอบกลับของฉันฉันใช้axiosเพื่อดำเนินการร้องขอ REST api

แต่ไม่สามารถส่งส่วนหัวการให้สิทธิ์พร้อมคำขอได้

นี่คือรหัสของฉัน:

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 รายการโดยแจ้งว่า

ไม่สามารถแยกวิเคราะห์โทเค็นจากคำขอได้

จากด้านหลัง

จะส่งส่วนหัวการให้สิทธิ์กับแต่ละคำขอได้อย่างไร คุณจะแนะนำโมดูลอื่น ๆ ที่มีปฏิกิริยาหรือไม่?

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 เช่นกัน.

นี่คือวิธีเฉพาะในการตั้งค่าโทเค็นการอนุญาตในแกน การตั้งค่าการกำหนดค่าให้กับการเรียก axios ทุกครั้งไม่ใช่ความคิดที่ดีและคุณสามารถเปลี่ยนโทเค็นการอนุญาตเริ่มต้นโดย:

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

แก้ไขขอบคุณ Jason Norwood-Young

API บางตัวกำหนดให้ผู้ถือเขียนเป็น Bearer ดังนั้นคุณสามารถทำได้:

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

ตอนนี้คุณไม่จำเป็นต้องตั้งค่าการเรียกใช้ API ทุกครั้ง ขณะนี้โทเค็นการอนุญาตถูกตั้งค่าเป็นทุกการเรียก axios

พารามิเตอร์ที่สองของaxios.postis data(not config) configเป็นพารามิเตอร์ที่สาม โปรดดูรายละเอียดที่นี่: https://github.com/mzabriskie/axios#axiosposturl-data-config

คุณสามารถสร้าง config เพียงครั้งเดียวและใช้งานได้ทุกที่

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

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

โดยใช้ Axios interceptor:

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

หากคุณต้องการข้อมูลบางส่วนหลังจากส่งโทเค็นในส่วนหัวแล้วให้ลองใช้รหัสนี้

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

ใช้งานได้และฉันต้องตั้งค่าโทเค็นเพียงครั้งเดียวในapp.js:

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

จากนั้นฉันสามารถส่งคำขอในส่วนประกอบของฉันได้โดยไม่ต้องตั้งค่าส่วนหัวอีกครั้ง

"axios": "^0.19.0",

axiosโดยตัวมันเองมาพร้อมกับ "วิธีการ" ที่มีประโยชน์สองวิธีinterceptorsที่ไม่มีเลยนอกจากตัวกลางระหว่างคำขอและการตอบกลับ ดังนั้นหากคุณต้องการส่งโทเค็นในแต่ละคำขอ ใช้interceptor.request .

ฉันทำ apackage ที่ช่วยคุณได้:

$ 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-7c882f71e34a มันเป็นสื่อ โพสต์ว่ามาจากไหน

นี่คือสิ่งที่ฉันเผชิญเช่นกัน โทเค็นที่คุณกำลังส่งไม่ถูกต้อง

เพียงแค่ Hardcode โทเค็นและส่งคุณจะได้รับคำตอบที่ถูกต้อง แต่ถ้าโทเค็นไม่ถูกส่งผ่านในเครื่องหมายคำพูดเดียว '' ก็จะล้มเหลวอย่างแน่นอน ต้องอยู่ในรูปแบบ 'Authorization': 'Bearer YzE5ZTdiMjVlYzM5NjA2MGJkZTM5NjVlOTQ5YMmQ5ZjMwYjA0YmEzZmZjN2I1MmI4MDJkNQ' โดยที่หลังจาก Bearer ต้องเว้นวรรคหนึ่งช่องคำพูดนี้ก็สำคัญมากเช่นกัน

var token = "YzE5ZTdiMjVlYzM5NjA2MGJkZTM5NjVlOTQ5YMmQ5ZjMwYjA0YmEzZmZjN2I1MmI4MDJkNQ";

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

IMP: รหัสด้านบนจะใช้งานได้ แต่ถ้าคุณโพสต์สิ่งที่ต้องการ:

'Authorization': 'Bearer' + YzE5ZTdiMjVlYzM5NjA2MGJkZTM5NjVlOTQ5YMmQ5ZjMwYjA0YmEzZmZjN2I1MmI4MDJkNQ มันจะล้มเหลว

หรือ ----- โค้ดด้านล่างจะล้มเหลวฉันหวังว่าคุณจะเข้าใจความแตกต่างพื้นฐาน

var token = YzE5ZTdiMjVlYzM5NjA2MGJkZTM5NjA0YmEzZmZjN2I1MmI4MDJkNQ;

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