【Vuex】Rails(devise_token_auth)+Vue.js의 SPA로 로그아웃하는 샘플 코드

소개

Rails + Vue.js의 SPA에서 devise_token_auth를 사용하여 로그 아웃하는 샘플 코드를 남깁니다.

요청 헤더 정보를 저장하는 데 Vuex를 활용했습니다.

환경

OS: macOS Catalina 10.15.1
Ruby: 2.6.5
Rails: 6.0.2.1
Vue: 2.6.10
vuex: 3.1.2
axios: 0.19.0

사고방식

devise_token_auth의 공식 문서의 sign_out 주제에는 이렇게 쓰여져 있습니다.



Use this route to end the user's current session. This route will invalidate the user's authentication token. You must pass in uid, client, and access-token in the request headers.

요청 헤더에 uid, client, access-token를 포함하여 DELETE 요청을 던져야합니다.

이 헤더 정보를 저장하기 위해 Vuex를 사용합니다.

코드

store.js

import 'babel-polyfill'
import Vue from 'vue'
import Vuex from 'vuex'

import axios from 'axios'

Vue.use(Vuex)

const store = new Vuex.Store({

  state: {
//ヘッダの入れ物を用意。
    headers: null,
  },

  mutations: {

//サインイン時のレスポンスヘッダから情報を抜き出して保存しておく。
    signIn(state, payload) {
      state.headers = {
        "access-token": payload["access-token"],
        "client": payload["client"],
        "uid": payload["uid"],
      };
    },

//サインアウトしたらヘッダを空にしておく。
    signOut(state) {
      state.headers = null;
    },
  },

  actions: {
//paramsはemailなどのユーザー情報が入っていると思って下さい。
//（paramsへの情報の入れ方は今回割愛。）
    signIn(context, params) {
      axios
        .post('/api/v1/auth/sign_in', params)
        .then(function (response) {
//ここでレスポンスヘッダを受け取る。
          context.commit('signIn', response.headers);
      })
    },
    signOut(context) {
      axios
//ここでヘッダ情報を呼び出してDELETEリクエストに含める
        .delete('/api/v1/auth/sign_out', { headers: context.state.headers })
        .then(function () {
          context.commit('signOut');
      })
    },
  },
})

export default store

※본래는 currentUser와 같은 state도 준비해야 할까 생각합니다만, 이야기를 슈퍼 심플하게 하기 위해서 컷 하고 있습니다.

전화하는 방법

Webpack의 진입점이 되는 파일에서 이전store.js을 로드합니다.

main.js

import Vue from 'vue'
import App from '../App.vue' 
import store from './store.js' //こちら

document.addEventListener('DOMContentLoaded', () => {
  const app = new Vue({
    store, //こちら
    render: h => h(App)
  }).$mount()
  document.body.appendChild(app.$el)
})

↓store.js 를 읽으면 임의의 단일 파일 컴퍼넌트내에서, 다음과 같이 해 signOut 를 호출할 수 있습니다.

Anything.vue

<template>
  <div>
    <button @click="signOut">ログアウト</button>
  </div>
</template>

<script>

  export default {
    methods: {
      signOut() {
        this.$store.dispatch('signOut')
      }
    }
  }
</script>

※예에서는 매우 심플하게, 사인아웃에 필요한 개소만 빼내고 있습니다.

결론

끝까지 읽어 주셔서 감사합니다

누군가의 도움이 되길 바랍니다

참고로 한 사이트 (항상 감사합니다)

Vuex 입문 | Vuex

devise_token_auth/docs/usage at master · lynndylanhurley/devise_token_auth · GitHub