Vue Interceptor 설정하여 Authorization 값 넣기

설정하기

headers.Authorization에 jwt 요청 마다 인증을 값을 넣어 백서버와 서로 인증을 할 수 있게 할것이다.

 

먼저 인증절차가 끝난 경로와 인증절차를 해야하는 경로 두개로 나누어 url.js파일을 만든다.

 

인증절차가 끝난 경로는 계속해서 인증값을 전달해주어야 하는데 이때 Interceptor 를 사용한다. 

 

파일 구성은 이렇게 한다.

 

구성

구성

interceptor.js

//store에 저장된 토큰을 import하기 위함
import store from '../../store/storeIndex'

export function setInterceptors (instance) {
  instance.interceptors.request.use(
    function (config) {
    //Authorization에 store에서 가져오 토큰을 삽입
      config.headers.Authorization = store.state.token
      return config
    },
    function (error) {
      return Promise.reject(error)
    }
  )

  instance.interceptors.response.use(
    function (response) {
      return response
    },
    function (error) {
      return Promise.reject(error)
    }
  )
  return instance
}

url.js

import axios from 'axios'
import { setInterceptors } from './common/interceptor'
// import store from '../store/index'

function createInstance () {
  return axios.create({
    baseURL: http://localhost:3000/
  })
}

function createInstanceWithAuth () {
  const instance = axios.create({
    baseURL: http://localhost:3000/
  })
  return setInterceptors(instance)
}

const instance = createInstance()
const instanceAuth = createInstanceWithAuth()
export { instance, instanceAuth }

 

createInstanceWithAuth( ) 함수는 인증절차를 끝내고 계속해서 인증값을 보내야 하는 함수다. 

그래서 setInterceptors( )함수에 요청해 Interceptor를 실행한다.

 

url값이 들어간 

config에 있는 headers.Authorization에 인증값을 넣어주면된다.

요청을 실행 시키면 백에서는  req.headers.Authorization 값으로 받아 올 수 가있다.