初学者の備忘録です。もっと良い方法や誤りがございましたらご指摘頂けると幸いです。
vueで作成したログインフォームからログイン後にuserのidを取得してヘッダー等のリンクに仕込む方法です(例 users/1)。
※vuexがインストール済みという前提です。
#実装の流れ
①controller/createでuserのidをjson形式で呼び出す
②vue/login componentでaxios.post後にjsonデータを受け取るようにする
③vuexで受け取ったjson形式のuserのidをuserIdとして保存するmutationを作成する
④vue/header componentでlinkにidを仕込む
#Rails側の実装
class Api::SessionsController < ApplicationController
def create
@user = User.find_by(email: params[:session][:email].downcase)
log_in @user
render json: { id: @user.id }
end
end
render json: { id: @user.id}でpostリクエスト後に@userのidを呼び出す。
#Vue側の実装
<script>
import axios from 'axios';
data() {
return {
session: {
email: '',
password: '',
}
}
},
createSession: function () {
axios.post('/api/login', {
session: this.session
})
.then(response => {
const id = response.data.id
this.$store.commit('setId', id),
this.$router.push({ path: '/'})
})
</script>
const id = response.data.idでjson形式のuser.idを定数idに保存する。
以降の箇所は次のvuexで実装します。
import { createStore } from 'vuex'
export const store = createStore ({
state() {
return {
userId: 0
}
},
mutations: {
setId: (state, id) => {
state.userId = id
}
}
})
mutationsではstateとidを引数としてidには前述のresponse.data.idで取り出した定数idの値を与えます。
※userId:0は初期値の設定なので0に意味はありません。
これでstate.userId = idによりuserIdには最終的にログインしたuserのidが返り値として保存されるようになります。
後はこれも前述の通り、this.$store.commit('setId', id)でmutationを実行し、ログイン後にuserIdというVueのコンポーネント共通で使用できるkeyにuserのidを保存できます。
<template>
<router-link :to="{name: 'show', params: {id:
$store.state.userId}}">マイページ
</router-link>
</template>
router-linkのparamsに仕組まれた「$store.state.userId」はstore.jsのuserIdの値が代入されます。
従ってこのリンクをクリックすると'/users/1'のようにログイン中のユーザーに応じたページを表示できます。