はじめに
現在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の実装は今回も敢えてしてないです。
②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() ?? '[]' }}"/>
④App.vueを編集
App.vueでauthをpropsしてさらにRouterViewへ渡す。
っとここで以下のようなエラーが出ることを確認しました。。。orz
⑤Board.vueを編集
ログイン有無で表示を変えます。値があれば名前を表示。なければ会員登録/ログインボタンの表示。
⑥Auth/LogionController.phpの編集
リダイレクト先を”/”に変更。
ログアウト
①web.phpの編集
Route::post('/logout', 'Auth\LoginController@logout'); // add
②App.vueの編集
現状の確認
おわりに
前回から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>
②Tinkerで確認
Tinker使ってみた。以下のようにAuth::user()はオブジェクトでデータを取得することが分かる。
参考
このアプリは数々のチュートリアル・教材を参考に制作しています。
参考にさせていただいた教材は以下でご紹介させていただきます。
参考教材
Vue.js/Vuexを使ってTrello風アプリを作成しよう！
【Laravel x Vue.js】SPAクイズアプリケーションを作ってみよう！
Laravel(+Vue.js)でSNS風Webサービスを作ろう！
Vue + Vue Router + Vuex + Laravelで写真共有アプリを作ろう
入門Laravelチュートリアル (2) ToDoアプリケーションの設計
公式ドキュメント(英文)
公式ドキュメント
Null合体演算子 1つ目の値が非NULLであればそれを返し、そうでない場合は2つ目の値を返す。
