vue3(script_setup)+devise_token_authでcurrent_userを取得する方法

javascript

本記事では、devise_token_authでcurrent_userを取得する方法について解説します。使用する環境は、vue3(script_setup使用)で、rails APIモードです。

current_userを取得するまでの流れ

devise_token_authでは、ログイン時に、tokenを発行しそれをブラウザ側に送信します。

ブラウザ側では、受け取った情報(tokenとuidとclient)をlocalStorageに保存します。そして、そのトークン情報をheaderに載せてrails側に渡し、tokenが切れていなければ、current_userを取得することができます。

本記事では、ログイン時にtoken、uid、clientをローカルストレージに保存し、その保存したデータからcurrent_userを取得する方法について解説します。

config/initializers/devise_token_auth.rbの編集

まずは、initializerの設定をしておきます。

DeviseTokenAuth.setup do |config|
  config.change_headers_on_each_request = false
  config.token_lifespan = 2.weeks
end

config.change_headers_on_each_requestでは、リクエストを送るたびにheader情報を変更する処理になりますが、今回はトークンを維持したいので、この設定はfalseにします。

config.token_lifespanでは、保持する期間を設定することができ、一般的な2週間に設定しておきます。

Login機能を実装する

vue.jsにおけるログイン情報の送信画面を下記に作成しました。

<script setup>
  import { onMounted, ref } from 'vue'
  import axios from 'axios'

  const user = ref({
    email: '',
    password: ''
  })
const login = async() => {    
    axios.post('/auth/sign_in', {
      email: user.value.email,
      password: user.value.password,
    })
    .then((response) => {
      localStorage.setItem("access-token", response.headers["access-token"])
      localStorage.setItem("client", response.headers["client"])
      localStorage.setItem("uid", response.headers["uid"])
      console.log(response)
    })
    .catch((error) => {    
    console.log(error)    
  })
 }
</setup>
<template>
<div class="signup-container">
  <h1>ログイン</h1>
    <form @submit.prevent="login" class="my-5">
      <div class="m-2 row">
        <label for="email" class="col-3">メールアドレス:</label>
        <input type="email" id="email" class="w-100 col-9" v-model="user.email" required>
      </div>
      <div class="m-2 row">
        <label for="password" class="col-3">パスワード:</label>
        <input type="password" id="password" class="w-100 col-9" v-model="user.password" required>
      </div>
      <button type="submit" class="btn btn-outline-primary">ログイン</button>
    </form>
</div>
</template>

axiosにて、レスポンスはthenにてresponse.headerで受け取ります。

そして、localstorage.setItemにてローカルストレージにトークン等を保存します。

current_userを取得する

まずrails側の実装です。こちらはcurrent_userがいればそのユーザーを返す処理を作成します。

class UsersController < ApplicationController
  def index
    binding.pry
    if current_user
      render json: { is_login: true, data: current_user }
    else
      render json: { is_login: false, message: "ユーザーが存在しません" }
    end
  end
end

vue側の処理を作成します。ポイントは、headerにaccess_token, client, uidを載せてリクエストを送っているところです。

<script_setup>
  const email = ref('')

  const issignin = async() => {    
    axios.get('/users', {
      headers: {
        'access_token': localStorage.getItem('access-token'),
        'client': localStorage.getItem('client'),
        'uid': localStorage.getItem('uid'),
      }
    })
    .then((r) => {
      email.value = r.data.data.email
      console.log(r)
    })
    .catch((e) => {
      console.log(e)
    })
  }
onMounted(issignin)
</script>
<template>
<div>
 {{ email }}
</div>
</template>

onMountedで関数を実行できるようにしているので、リロードしたらcurrent_userのデータを取得することができます。

コメント

タイトルとURLをコピーしました