Laravel+SPA+JTWAuthで認証ありの投稿アプリをつくる ~パート1~

はじめに

サーバーサイドの処理はLaravelでクライアントサイドはSPAで認証、新規会員登録、記事の投稿を一括で作成しましたので、自分用のメモ含め紹介いたします。

前提

Laravel5.5
Vagrant環境
認証はJTWAuth使用
SPAはVue、Vue Router

今回作るもの

Laravel+SPAでログイン認証画面と記事投稿アプリを各単体で実装。
基本は別の方があげていただいているドキュメントが良くできているので
そちらを読み進めて行ってください。
[一部変更]の箇所に変更点をまとめています。

完全コピペでつくれるチートシート版も作成しました。
https://qiita.com/ProgramingDai/items/0cbd704d51a7353c4681

手順レシピ

1.JTWAuthでログインのSPAを作成
Laravel + JWTAuth + Vue.js でAPIログイン認証の実装
https://www.webopixel.net/php/1444.html

[一部変更]
①「resources/js/components/App.vue」の
「<router-view></router-view>」を
「resources/views/app.blade.php」に移動
②Home.vueのコンポーネントが設定されていますが
コンポーネントファイルを生成する指示がないので、適当に作成しておく。
※しないとコンパイルエラー出ます

2.記事のSPAを作成
Laravel5.6とVue.jsで簡単なシングルページアプリケーション
https://qiita.com/shin1kt/items/8c98fb209de5caa9076d

[一部変更]
①Userテーブルと関連づけたいので１カラム追加

database/migrations/****_**_**_******_create_topics_table.php

public function up()
{
    Schema::create('topics', function (Blueprint $table) {
        $table->increments('id');

        // 外部キーカラム追加
        $table->text('user_id');

        $table->text('title');
        $table->text('content');
        $table->timestamps();
    });
}

これ以降の外部キー（user_id）に関する部分はパート2で編集しますのでマイグレーションのみ追加してください。ただし、外部キー以外のカラムにおいて追加・変更した際は、その都度、読み替えて作成してください。

②npm installとnpm install vue-router、bladeの作成、Laravel側のルーティングは「1.JTWAuthでログインのSPAを作成」でおこっなっているのでしなくて良い（名称もJTWAuthドキュメントに合わす）。

③app.blade.phpに「<navbar></navbar>」は追加
記事のページを表示させる部分
app.jsにも追加

resources/assets/js/app.js

Vue.component('navbar', require('./components/Navbar.vue'));

④「2.記事のSPAを作成」ドキュメントではapp.jsに集約されているが、
「router.js」をすでに作っている思いますので、const router = new VueRouter部分はそちらに書く

resources/assets/js/router.js

// 中略
import List from './components/pages/List'
import Form from './components/pages/Form'
import Detail from './components/pages/Detail'

//中略
const routes = [
    // 中略
    { path: '/list', component: List, meta: { requiresAuth: true }, name: 'list' },
    { path: '/create', component: Form, meta: { requiresAuth: true }, name: 'create' },
    { path: '/:id', component: Detail, meta: { requiresAuth: true }, name: 'detail' },
];

⑤componentの階層注意
components/pages/〜内に設定されているのでこちらに各コンポーネント配置

⑥標準のルーティングコメントアウト

routes/web.php

// Route::get('/', function () {
//     return view('welcome');
// });

// Auth::routes();

ここまでで、ログイン認証と記事投稿のベースデータが完成できたかと思います。ここで記事を投稿しようとしてもuser_idをpostしていないので投稿できません。
次回は、認証ユーザーで記事投稿できるようにしたいと思います。

補足

js側を変更した場合は
npm run devしないと更新されませんので、ご注意ください。