【Laravel+Vue.js】アプリ制作の記録⑨DB連携(ログイン/ログアウト機能)

はじめに

現在Laravel+Vue.jsでのアプリ制作の記録です。

前回の記事でついに会員情報の登録ができました。

次はログイン/ログアウトを実装していきたいと思います。

※前回までの記録。

【Laravel+Vue.js】アプリ制作の記録①設計

【Laravel+Vue.js】アプリ制作の記録②プロジェクト作成

【Laravel+Vue.js】アプリ制作の記録③Vue Routerの実装

【Laravel+Vue.js】アプリ制作の記録④Vuexの実装

【Laravel+Vue.js】アプリ制作の記録⑤Vue.js側の作成

【Laravel+Vue.js】アプリ制作の記録⑥DBからのデータ取得

【Laravel+Vue.js】アプリ制作の記録⑦DB連携(会員登録/ログイン機能)

【Laravel+Vue.js】アプリ制作の記録⑧DB連携(会員登録/ログイン機能)

ログイン・ログアウト機能の実装

【Laravel x Vue.js】SPAクイズアプリケーションを作ってみよう!

引き続き上記の教材を参考に実装していきます。

ログイン機能

①Login.vueの編集

※VeeValidateの実装は今回も敢えてしてないです。

※ValidationObserverをformタグに変えてます。

②web.phpへ追記

Route::get('/login',function(){
  return view('index');
});
Route::post('/login', 'Auth\LoginController@login');

③views/layouts/app.blade.phpの編集

Vue.jsにログイン判別情報を送る。

<app :auth="{{ Auth::user() ?? '[]' }}"/>
ちょび
Null合体演算子便利でびっくり!!

④App.vueを編集

App.vueでauthをpropsしてさらにRouterViewへ渡す。

っとここで以下のようなエラーが出ることを確認しました。。。orz

ちょび
かなり粘りましたが原因が全く掴めなかったので一旦先に進めます。

⑤Board.vueを編集

注意
④で躓いたためここからは仮実装です。※後日改修。

ログイン有無で表示を変えます。値があれば名前を表示。なければ会員登録/ログインボタンの表示。

⑥Auth/LogionController.phpの編集

リダイレクト先を”/”に変更。

ちょび
ログイン後、会員登録でDBへの追加ができなかったため、ログイン成功しているとみなします。

ログアウト

①web.phpの編集

Route::post('/logout', 'Auth\LoginController@logout'); // add

②App.vueの編集

ちょび
Auth認証がpropsできていないので仮確認。会員登録(DB反映確認)⇒会員登録(DB反映されない)⇒ログアウト⇒会員登録(DB反映確認)。機能はしていることがわかりました。

現状の確認

おわりに

前回からGitHubのGistを利用し始めました。備忘録にもなってとても良いです。

(前回記事では拡張子まで反映されるの知らなくてガン無視してしまった。。。)

Blade側からの認証データの受け渡しが上手くいかず悔しい。

教材の方を読み進めると、9-2で値の更新、9-4でAPI認証がある。

けど正直それ以前の実装ができていない。。。orz

もう一段、それこそシンプルなテスト的簡易アプリでLaravelとVue.js連携のための実装方法を学び直したほうが良さそう

ここまでのソースコード

今回の気付き

①メソッドが定義されていないものがあると、ビューの読込がそこで終わる。

②headerなどレイアウトごとにインライン記述で色付け。把握しやすい。

追記:その後の改修記録

①Board.vueの編集

確認に不要なコードの削除

・使っていなかった@submitメソッド。

・カード追加用の@submitメソッド、formタグ、インプットタグ

<template>
  <div>
    <p>list title</p>
    <div v-for="list in lists" :key="list.id">
      {{ list.title }}
    </div>
    <p>card title</p>
    <div v-for="(card, index) in cards" :key="index">
      {{card.title}} {{card.status}}
    </div>
  </div>
</template>

<script>
export default {
  props: {
    lists: {
      type: Array
    },
    cards: {
      type: Array
    }
   }
  }
</script>
ちょび
App.vueからのデータ受け取りができているか確認するだけのミニマム仕様にしました。不要な部分をそぎ落としたおかげか、display:noneでpropsのデータを出力する記載をしないと表示されなかったv-forでの表示がされるようになりました。不思議。(以前の記事にて記載)
ちょび
さらにその後、色々と試した結果、Auth::user()ではなくAuth::id()であれば数字での表示ですが、諸々の実装ができました。ログイン有無による描画の切り替えなど。なぜAuth::userだと表示されないんだろう。。。

②Tinkerで確認

Tinker使ってみた。以下のようにAuth::user()はオブジェクトでデータを取得することが分かる。

ちょび
@json使ってJSONに変換したらいいのかなとか思ったけどエラー。惜しいところまで来た気がするけどだめでした。泣
ちょび
いまいち原因が掴めていないので、諸々解決したら改めて記事にします。

参考

このアプリは数々のチュートリアル・教材を参考に制作しています。

参考にさせていただいた教材は以下でご紹介させていただきます。

参考教材

Vue.js/Vuexを使ってTrello風アプリを作成しよう!

【Laravel x Vue.js】SPAクイズアプリケーションを作ってみよう!

Laravel(+Vue.js)でSNS風Webサービスを作ろう!

trello風todoタスク管理アプリを作成しよう!

Vue + Vue Router + Vuex + Laravelで写真共有アプリを作ろう

入門Laravelチュートリアル (2) ToDoアプリケーションの設計

公式ドキュメント(英文)

 

公式ドキュメント

Null合体演算子 1つ目の値が非NULLであればそれを返し、そうでない場合は2つ目の値を返す。

その他参考(Qiitaなど)

[Vue.js]dataオプションにオブジェクトや配列を設定してみる

Vueのpropsの使い方

【Laravel】【PHP】json_decode(配列化)/ json_encode(JSON化)

コメントを残す