vue+axios 전역 추가 요청 헤드 와 매개 변수 작업

로그 인 한 인 터 페 이 스 를 걸 으 면 token 값 을 되 돌려 주 고 저장 이 편리 한 후에 인 터 페 이 스 를 바 꿀 때 백 스테이지 에 전달 합 니 다.백 스테이지 에 전달 하 는 방식 은 두 가지 가 있 습 니 다.(구체 적 으로 어떤 것 을 사용 하 는 지 백 스테이지 와 상의 해 야 합 니까?)
1.요청 머리 에 넣 기
2.인터페이스 에 있 는 매개 변수
1.요청 머리 에 넣 기
다음 코드 는 로 컬 쿠키 에서 token 을 가 져 옵 니 다.
VueCookie： 브 라 우 저 cookies 를 처리 하 는 간단 한 Vue.js 플러그 인

//    axios         
//        ，      token
service.interceptors.request.use(
 config => {
 //      cookie    token
 if (VueCookie.isKey('token')) {
 config.headers.Authorization = VueCookie.get('token')
 } else {
 //        (    router，               )
 router.push('/login')
 }
 return config
 },
 error => {
 return Promise.reject(error)
 })

이 때 요청 헤더 에 token 을 넣 었 지만 배경 에 token 의 값 을 가 져 올 수 없습니다.axios 대상 을 만 들 때 cokie 를 가 져 오 라 고 요청 할 수도 있 고 main.js 전역 에 추가 할 수도 있 습 니 다.

//        
const service = axios.create({
 baseURL: "http://XXXXXXXXX:XXXX",
 timeout: 10000,
 withCredentials: true //     cookie
});

//     main.js 
import axios from "axios";
axios.defaults.withCredentials = true; //     cookie

2.매개 변수 에 넣 기
다음 코드 는 로 컬 저장 소 localstorage 에서 token 을 가 져 옵 니 다.

//        ，     token
service.interceptors.request.use(
 config => {
 //  token            
 //        ：   post          data  ；   get     params  
 const token = localStorage.getItem('ISTOKEN')
 if (localStorage.getItem('ISTOKEN')) {
 //   ：config.method           post get
 if (config.method === 'post') {
 config.data = {
  api_token: token,
  ...config.data
 }
 } else if (config.method === 'get') {
 config.params = {
  api_token: token,
  ...config.params
 }
 }
 } else {
 //        (    router，               )
 router.push('/login')
 }
 return config
 },
 error => {
 return Promise.reject(error)
 })

추가 지식:Vue,POST 요청 헤더'Content-Type':'application/json;',데이터 업로드 방법
다음 과 같다.

transform Request 방법 설명axios 중국어 문서
이상 의 vue+axios 전역 에 요청 헤드 와 매개 변 수 를 추가 하 는 작업 은 바로 작은 편집 이 여러분 에 게 공유 하 는 모든 내용 입 니 다.여러분 께 참고 가 되 고 저 희 를 많이 지지 해 주시 기 바 랍 니 다.