Vue Apollo Client CSRF 토큰 전달

janjanee·2020년 7월 14일

Apollo client CSRF TOKEN csrf header vue vue apollo

vue.js

목록 보기

2/5

Vue apollo Client 통신 header에 서버의 CSRF 토큰 전달 방법
(참고 서버는 스프링)

apollo.js

const csrfToken = document.querySelector('meta[name="_csrf"]').content
const csrfHeader = document.querySelector('meta[name="_csrf_header"]').content

const linkOption = () => {
  const options = {
    uri: '/graphql',
    credentials: 'include',
  }

  return process.env.NODE_ENV === 'production' ? { ...options, headers: { [csrfHeader]: csrfToken } } : options
}

const httpLink = createHttpLink(linkOption())

httpLike option에 headers를 추가한다.

index.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
</html>

thymeleaf 설정 추가, index.html 에서 meta tag 추가 후 build 시 에러 발생!
thymeleaf meta tag를 인식하지 못하는것 같다(?)

해결 방법으로는 webpack 설정을 통해 meta tag 추가

vue.config.js

  // html meta tag config
  chainWebpack: config => {
    config
      .plugin('html')
      .tap(args => {
        args[0].meta = {
          '_csrf': {'name': '_csrf', 'th:content': '${_csrf.token}'},
          '_csrf_header': {'name': '_csrf_header', 'th:content': '${_csrf.headerName}'},
        }
        return args
      })
  },

janjanee

얍얍 개발 펀치

이전 포스트

vuetify Data tables slot 구성 (dynamic slot name 활용)

다음 포스트