VueJS에 Get, Post, Patch를위한 글로벌 헤더를 설정하는 가장 좋은 방법

Question

나는 VueJs에 익숙하지 않다. VueJS에 Get, Post, Patch를위한 글로벌 헤더를 설정하는 가장 좋은 방법은 이다. 강력한 보안. 현재 나는 모든 구성 요소에 대해 export default {}에 글을 쓰고 있으며 매우 잘 알고 있습니다. 그래서 너희들에게 도움을 청한다.

이

import axios from 'axios' 

var api = axios.create({ 
    baseURL: 'http://localhost:8000/api/v1/', 
    headers: {'Authorization': 'JWT ' + store.state.token} 
}) 

export default api 

문제가 : 그래서, axios.create에 store is not defined을 가게를 tranmit 수 없습니다 @Hardik Satasiya에

고정 덕분에

~/플러그인/

모든 구성 요소를 axios.js

Answer 1

예 그것의 좋은 아이디어는 axios를 사용합니다.

당신이 (당신이 동시에 multiple api를 사용하는 경우)

import axios from 'axios'; 

var myApi = axios.create({ 
    baseURL: 'https://my-domain.com/api/', 
    timeout: 1000, 
    headers: {'X-Custom-Header': 'CustomHeader1'} 
}); 

// another api service 
var amazonApi = axios.create({ 
    baseURL: 'https://amazon-domain.com/api/', 
    timeout: 2000, 
    headers: {'X-Custom-Header': 'CustomHeader2'} 
}); 

export default { 
    myApi, 
    amazonApi 
} 

이 별도의 instances을 만들려면이

import axios from 'axios'; 

axios.defaults.baseURL = 'https://api.example.com'; 
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN; 
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; 

또는 가장 방법을 글로벌 설정입니다 사용할 수 있습니다

이므로 api을 별도로 사용할 수 있습니다.

당신이 중 하나를 localStorage에서 가져 오기 또는 제 3 자로부터 취득하고 당신이 그것을 설정할 수 있습니다 할 수 있도록 추가 준비 콜백 인 경우 대신 당신이 그것을 설정할 수 있습니다 강렬한 창조에서 설정하지 그것의 좋은 인증 헤더를 설정합니다.

당신이 토큰을 다음 헤더를 설정하려면이 코드를 사용하면 있는지 때 그래서 당신이 어떤 부분에서 헤더를 설정할 수 있습니다 생성

myApi.defaults.headers.authorization = 'JWT ' + yourToken; 

후 나중에 헤더를 변경합니다. 그리고 이미 헤더를 요청한 경우이 코드를 사용하여 설정할 수도 있습니다.

Answer 2

vue-resource을 사용하여 http 요청을 한 다음 interceptors을 사용하여 요청을 수정하거나 수정할 수 있습니다. 그것의 repo가 ​​유지되기 때문에

Vue.http.interceptors.push(function(request, next) { 

    // modify method 
    request.method = 'POST'; 

    // modify headers 
    request.headers.set('X-CSRF-TOKEN', 'TOKEN'); 
    request.headers.set('Authorization', 'Bearer TOKEN'); 

    // continue to next interceptor 
    next(); 
});