laravel 6 + Nuxt.js で作るJWT認証つきSPA構築

version: '3'
services: 
  web_1:
    image: centos_apache:1.0
    depends_on: 
      - db
    volumes: 
      - ./html/:/var/www/html/
      - ./web_1/httpd.conf:/etc/httpd/conf/httpd.conf
      - /sys/fs/cgroup:/sys/fs/cgroup:ro
    ports: 
      - "9000:80"
      - "3000:3000"
      - "8000:8000"
    privileged: true
    command: /sbin/init
  db:
    image: mysql:5.7
    environment:
      MYSQL_DATABASE: trend_system
      MYSQL_USER: trend
      MYSQL_PASSWORD: trendtrend
      MYSQL_ROOT_PASSWORD: rootroot
    ports: 
      - "3306:3306"
    volumes: 
      - laravel_data:/var/lib/mysql
volumes: 
  laravel_data: {}

Listen 8000
<Directory "/var/www/html/frontend/dist">
    Options Indexes FollowSymLinks
    AllowOverride All
    Require all granted
</Directory>

<VirtualHost *:80>
    ServerName example.com
    DocumentRoot /var/www/html/frontend/dist
</VirtualHost>

<VirtualHost *:8000>
    ServerName example.com
    DocumentRoot /var/www/html/laravel/public
</VirtualHost>

docker exec -it {web側のコンテナ名} /bin/bash

DB_CONNECTION=mysql
DB_HOST=db // docker-compose.yml で定義したDBのコンテナ
DB_PORT=3306
DB_DATABASE=laravel_test
DB_USERNAME=root
DB_PASSWORD=rootroot

$ php artisan migrate

composer require tymon/jwt-auth:1.0.0-rc.5

php artisan vendor:publish --provider="Tymon\JWTAuth\Providers\LaravelServiceProvider"

'providers' => [

/*
|--------------------------------------------------------------------------
| JWT Provider
|--------------------------------------------------------------------------
|
| Specify the provider that is used to create and decode the tokens.
|
*/

// 'jwt' => Tymon\JWTAuth\Providers\JWT\Lcobucci::class,
'jwt' => Tymon\JWTAuth\Providers\JWT\Namshi::class,

]

Tymon\JWTAuth\Exceptions\JWTException: Could not create token: Implicit conversion of keys from strings is deprecated. Please use InMemory or LocalFileReference classes. 

php artisan jwt:secret

JWT_SECRET=ve1b******

<?php

namespace App;

use Illuminate\Contracts\Auth\MustVerifyEmail;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;
use Tymon\JWTAuth\Contracts\JWTSubject; //追加

class User extends Authenticatable implements JWTSubject //追加
{
    use Notifiable;

    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    protected $fillable = [
        'name', 'email', 'password',
    ];

    /**
     * The attributes that should be hidden for arrays.
     *
     * @var array
     */
    protected $hidden = [
        'password', 'remember_token',
    ];

    /**
     * The attributes that should be cast to native types.
     *
     * @var array
     */
    protected $casts = [
        'email_verified_at' => 'datetime',
    ];

    public function getJWTIdentifier()　 //追加
    {
        return $this->getKey();
    }

    public function getJWTCustomClaims()　 //追加
    {
        return [];
    }
}

    /*
    |--------------------------------------------------------------------------
    | Authentication Defaults
    |--------------------------------------------------------------------------
    |
    | This option controls the default authentication "guard" and password
    | reset options for your application. You may change these defaults
    | as required, but they're a perfect start for most applications.
    |
    */

    'defaults' => [
        'guard' => 'api', //変更
        'passwords' => 'users',
    ],
...
    'guards' => [
        'web' => [
            'driver' => 'session',
            'provider' => 'users',
        ],

        'api' => [
            'driver' => 'jwt', //変更
            'provider' => 'users',
            'hash' => false,

php artisan config:clear

Route::prefix('v1')->group(function(){
    Route::group(['middleware' => 'api', 'prefix' => 'auth'], function ($router) {
        Route::post('login', 'AuthController@login')->name('login');;
        Route::post('logout', 'AuthController@logout');
        Route::post('refresh', 'AuthController@refresh');
        Route::get('me', 'AuthController@me');
    });
});

$ php artisan route:list
+--------+----------+---------------------+-------+---------------------------------------------+--------------+
| Domain | Method   | URI                 | Name  | Action                                      | Middleware   |
+--------+----------+---------------------+-------+---------------------------------------------+--------------+
|        | POST     | api/v1/auth/login   | login | App\Http\Controllers\AuthController@login   | api          |
|        | POST     | api/v1/auth/logout  |       | App\Http\Controllers\AuthController@logout  | api,auth:api |
|        | GET|HEAD | api/v1/auth/me      |       | App\Http\Controllers\AuthController@me      | api,auth:api |
|        | POST     | api/v1/auth/refresh |       | App\Http\Controllers\AuthController@refresh | api,auth:api |
+--------+----------+---------------------+-------+---------------------------------------------+--------------+

php artisan make:controller AuthController

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;

class AuthController extends Controller
{
    /**
     * Create a new AuthController instance.
     *
     * @return void
     */
    public function __construct()
    {
        $this->middleware('auth:api', ['except' => ['login']]);
    }

    /**
     * Get a JWT via given credentials.
     *
     * @return \Illuminate\Http\JsonResponse
     */
    public function login()
    {
        $credentials = request(['email', 'password']);

        if (! $token = auth()->attempt($credentials)) {
            return response()->json(['error' => 'Unauthorized'], 401);
        }

        return $this->respondWithToken($token);
    }

    /**
     * Get the authenticated User.
     *
     * @return \Illuminate\Http\JsonResponse
     */
    public function me()
    {
        return response()->json(auth()->user());
    }

    /**
     * Log the user out (Invalidate the token).
     *
     * @return \Illuminate\Http\JsonResponse
     */
    public function logout()
    {
        auth()->logout();

        return response()->json(['message' => 'Successfully logged out']);
    }

    /**
     * Refresh a token.
     *
     * @return \Illuminate\Http\JsonResponse
     */
    public function refresh()
    {
        return $this->respondWithToken(auth()->refresh());
    }

    /**
     * Get the token array structure.
     *
     * @param  string $token
     *
     * @return \Illuminate\Http\JsonResponse
     */
    protected function respondWithToken($token)
    {
        return response()->json([
            'access_token' => $token,
            'token_type' => 'bearer',
            'expires_in' => auth()->factory()->getTTL() * 60
        ]);
    }
}

composer require fruitcake/laravel-cors

protected $middleware = [
    // ...
    \Fruitcake\Cors\HandleCors::class,
];

php artisan vendor:publish --tag="cors"

...
    /*
     * You can enable CORS for 1 or multiple paths.
     * Example: ['api/*']
     */
    'paths' => ['api/*'],
...
    /*
     * Matches the request origin. `['*']` allows all origins. Wildcards can be used, eg `*.mydomain.com`
     */
    'allowed_origins' => [
          'http://localhost',
          'http://localhost:3000',// nuxt
          'http://localhost:9000' // dockerの9000->80
        ],

...

npm install @nuxtjs/auth-next @nuxtjs/axios

...javascript[nuxt.config.js]
// Modules (https://go.nuxtjs.dev/config-modules)
  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/auth'
  ],
...

...
auth:{
    localStorage: false,
    strategies:{
      local:{
        tokenType:'bearer',
        endpoints:{
          login:{
            url:'/auth/login',
            method:'post',
            propertyName:'access_token'
          },
          logout:{
            url:'/auth/logout',
            method:'post',
          },
          user:{
            url:'/auth/me',
            method:'get',
            propertyName:false
          }
        }
      },
      redirect: {
        login: '/login',
        logout: '/',
        callback: '/login',
        home: '/home'
      }
}
...

const ENV = require('dotenv').config().parsed;
export default {
... 
env:ENV,
axios: {
    baseURL: ENV.API_BASE_URL,
  },
...
}

API_BASE_URL=http://localhost:8000/api/v1

<template>
    <b-modal
      id="login-modal"
      ref="modal"
      title="ログイン情報を入力してください。"
      ok-only
      :okTitle="'送信'"
      @show="resetModal"
      @hidden="resetModal"
      @ok="handleOk"
    >
      <form @submit.stop.prevent="handleSubmit">
        <b-alert v-if="loginErrMes" show variant="danger">{{loginErrMes}}</b-alert>
        <b-form-group
          :state="emailState"
          label="メールアドレス"
          type="email"
          label-for="name-input"
          invalid-feedback="メールアドレスは入力必須です。"
        >
          <b-form-input
            id="login-email-input"
            v-model="email"
            :state="emailState"
            required
          />
        </b-form-group>

        <b-form-group
          :state="passState"
          label="パスワード"
          label-for="name-input"
          invalid-feedback="パスワードは入力必須です。"
          autocomplete="username"
        >
          <b-form-input
            id="login-password-input"
            v-model="pass"
            type="password"
            :state="passState"
            autocomplete="current-password"
            required
          />
        </b-form-group>
      </form>
    </b-modal>
</template>

<script>
import { required, minLength, between } from 'vuelidate/lib/validators'
export default {
    name:'loginModal',
    data(){
        return{
            email:'',
            pass:'',
            emailState:null,
            passState:null,
            loginErrMes:null,
        }
    },
    validations:{
      email:{
        required,
      },
      pass:{
        required
      },
    },
    methods:{
        checkFormHasError(){
            this.emailState = !this.$v.email.$invalid;
            this.passState = !this.$v.pass.$invalid;
            return this.$v.$invalid;
        },
        resetModal(){
            this.email='';
            this.pass='';
            this.emailState=null;
            this.passState=null;
            this.loginErrMes=null;
        },
        handleOk(bvModalEvt){
            bvModalEvt.preventDefault()
            this.handleSubmit();
        },
        async handleSubmit() {
            if(this.checkFormHasError()) return;

            try{
              await this.$auth.loginWith('local', { data:{
                email:this.email,
                password:this.pass
              }})
              this.resetModal();
              this.$store.dispatch('message/setFlashMessage',{
                content:'ログインしました。',
                messageType:'success'
              })
              this.$bvModal.hide('login-modal')
            }catch(error){
              this.loginErrMes='パスワードまたはメールアドレスが異なります。';
            }
        }
    },
}

this.$auth.user
this.$auth.loggedIn

npm run build