Universalモード（SSR）のNuxt.js + 異なるサブドメインのAPIという構成でクッキー認証とCORSを実現する

$ composer create-project laravel/laravel nuxt-auth-sample

DB_CONNECTION=sqlite

$ touch database/database.sqlite
$ php artisan migrate

$ php artisan make:seeder UserTableSeeder

<?php

use Illuminate\Database\Seeder;

class UserTableSeeder extends Seeder
{
    public function run()
    {
        factory(\App\User::class)->create();
    }
}

$ php artisan db:seed --class=UserTableSeeder

$ php artisan tinker
>>> \App\User::first();
=> App\User {#2917
     id: "1",
     name: "Ruthie Rutherford",
     email: "mzulauf@example.org",
     email_verified_at: "2018-12-25 16:23:50",
     created_at: "2018-12-25 16:23:50",
     updated_at: "2018-12-25 16:23:50",
   }

class LoginController extends Controller
{
    /* 中略 */

    /**
     * ログイン成功
     */
    protected function authenticated(Request $request, $user)
    {
        return $user;
    }

    /**
     * ログアウト成功
     */
    protected function loggedOut(Request $request)
    {
        return response()->json();
    }
}

$ composer require barryvdh/laravel-cors

$ php artisan vendor:publish --provider="Barryvdh\Cors\ServiceProvider"

<?php

return [
    'supportsCredentials' => true, // ★
    'allowedOrigins' => [env('CORS_ALLOWED_ORIGIN')], // ★
    'allowedOriginsPatterns' => [],
    'allowedHeaders' => ['*'],
    'allowedMethods' => ['*'],
    'exposedHeaders' => [],
    'maxAge' => 0,
];

CORS_ALLOWED_ORIGIN=http://app.nuxt-auth-sample.test:3000

public function map()
{
    $this->mapApiRoutes();

    $this->mapWebRoutes();

    $this->mapCorsRoutes(); // 追加
}

// 追加
protected function mapCorsRoutes()
{
    Route::middleware('cors')
        ->namespace($this->namespace)
        ->group(base_path('routes/cors.php'));
}

<?php

namespace App\Http\Middleware;

use Closure;

class AjaxOnly
{
    public function handle($request, Closure $next)
    {
        if ($request->ajax()) {
            return $next($request);
        }

        abort(403);
    }
}

protected $middlewareGroups = [
    /* 中略 */

    // 新しいミドルウェアグループを追加
    'cors' => [
        \App\Http\Middleware\EncryptCookies::class,
        \Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class,
        \Illuminate\Session\Middleware\StartSession::class,
        \Illuminate\View\Middleware\ShareErrorsFromSession::class,
        \Illuminate\Routing\Middleware\SubstituteBindings::class,
        \App\Http\Middleware\AjaxOnly::class,
        \Barryvdh\Cors\HandleCors::class,
    ],
];

<?php

// 1.
Route::get('/user', function () {
    return Auth::user();
});

// 2.
Route::get('/message', function () {
    return ['text' => 'Hello, ' . Auth::user()->name];
})->middleware('auth');

// 3.
Auth::routes();

SESSION_DOMAIN=nuxt-auth-sample.test

$ npx create-nuxt-app auth-sample

? Project name auth-sample
? Project description My flawless Nuxt.js project
? Use a custom server framework none
? Use a custom UI framework none
? Choose rendering mode Universal
? Use axios module yes
? Use eslint no
? Use prettier no
? Author name Masahiro Harada
? Choose a package manager yarn

$ yarn add @nuxtjs/dotenv

API_URL=http://nuxt-auth-sample.test

require('dotenv').config() // ★ 追加 1.

module.exports = {
  /* 中略 */

  plugins: [
    '~/plugins/axios' // ★ 追加 2.
  ],

  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/dotenv' // ★ 追加 3.
  ],

  axios: {
    baseURL: process.env.API_URL, // ★ 追加 4.
    credentials: true // ★ 追加 5.
  },

  /* 中略 */
}

127.0.0.1       localhost app.nuxt-auth-sample.test

export default function ({ $axios }) {
  $axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'
}

export const state = () => ({
  user: null
})

export const mutations = {
  setUser (state, user) {
    state.user = user
  }
}

export const actions = {
  async login ({ commit }, { email, password }) {
    const response = await this.$axios.$post('/login', { email, password })
      .catch(err => err.response)

    if (response.status !== 200) { /* TODO エラー処理 */ }

    commit('setUser', response)
  },
  async logout ({ commit }) {
    const response = await this.$axios.$post('/logout')
      .catch(err => err.response)

    if (response.status !== 200) { /* TODO エラー処理 */ }

    commit('setUser', null)
  }
}

export const actions = {
  // SSR が走るタイミングでログインチェック
  async nuxtServerInit ({ commit }, { app }) {
    await app.$axios.$get('/user')
      .then(user => commit('auth/setUser', user))
      .catch(() => commit('auth/setUser', null))
  }
}

export default function ({ store, redirect }) {
  if (! store.state.auth.user) {
    redirect('/login')
  }
}

export default function ({ store, redirect }) {
  if (store.state.auth.user) {
    redirect('/')
  }
}

<template>
  <section>
    <h1>Hello world.</h1>
    <div v-if="$store.state.auth.user">
      <nuxt-link to="/secret">secret</nuxt-link>
    </div>
    <div v-else>
      <nuxt-link to="/login">login</nuxt-link>
    </div>
  </section>
</template>

<template>
  <section>
    <h1>Login</h1>
    <form @submit.prevent="submit">
      <div>
        <label for="email">email</label>
        <input type="text" id="email" v-model="email" />
      </div>
      <div>
        <label for="password">password</label>
        <input type="password" id="password" v-model="password" />
      </div>
      <button type="submit">login</button>
    </form>
  </section>
</template>

<script>
export default {
  middleware: 'guest',
  data () {
    return {
      email: '',
      password: ''
    }
  },
  methods: {
    async submit () {
      await this.$store.dispatch('auth/login', {
        email: this.email,
        password: this.password
      })

      this.$router.push('/secret')
    }
  }
}
</script>

<template>
  <section>
    <h1>Secret</h1>
    <p v-if="message">{{ message.text }}</p>
    <nuxt-link to="/">index</nuxt-link>
    <hr />
    <form @submit.prevent="logout">
      <button type="submit">logout</button>
    </form>
  </section>
</template>

<script>
export default {
  middleware: 'auth',
  data () {
    return {
      message: null
    }
  },
  async asyncData ({ app }) {
    const message = await app.$axios.$get('/message')
    return { message }
  },
  methods: {
    async logout () {
      await this.$store.dispatch('auth/logout')
      this.$router.push('/')
    }
  }
}
</script>