Why not login to Qiita and try out its useful features?

We'll deliver articles that match you.

You can read useful information later.

0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【rails×vue】ログイン後にuser_idを取得してリンクに仕込む

Posted at

初学者の備忘録です。もっと良い方法や誤りがございましたらご指摘頂けると幸いです。
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側の実装

api/sessions.controller

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側の実装

Login.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で実装します。

store.js

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を保存できます。

Header.vue
<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'のようにログイン中のユーザーに応じたページを表示できます。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?