nuxt.jsとlaravel8とmysqlで認証機能付きSPAを作る（nuxt編）


# 前提
フロントをnuxt.js、API側をlaravel8、DBにmysqlを使って認証機能付きSPAの環境構築をしていきます。

私の環境は下記の通りです。

OS: windows10
node.js: 14.17.6
php: 8.0.13
laravel: 8.83.8
nuxt: ^2.15.7
mysql: 8.0.13

※尚、本記事は下記記事の続きとなっております。

https://qiita.com/ryuki1126/items/b52b879912f1466c1ef0

# nuxt.jsの構築
前回作成した`sample-app`ディレクトリ配下に新しくnuxtプロジェクトを作成する

```shell
$ npx create-nuxt-app sample-web


// 質問は適当に答えました…
✨  Generating Nuxt.js project in sample-web
? Project name: sample-web
? Programming language: JavaScript
? Package manager: Yarn
? UI framework: None
? Nuxt.js modules: Axios - Promise based HTTP client
? Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Testing framework: None
? Rendering mode: Single Page App
? Deployment target: Server (Node.js hosting)
? Development tools: jsconfig.json (Recommended for VS Code if you're not using typescript)
? What is your GitHub username? hoge
? Version control system: Git
```

作成完了したら`sample-web`ディレクトリに入って上手くインストールが完了したか確認しましょう。
```
$ cd sample-web
$ yarn dev
```

ブラウザで`http://localhost:3000`にアクセスし、下記のような画面になればOKです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/878891/ddaef022-36cb-917a-08bd-dcfa1437a2fa.png)

確認出来たら次は`@nuxtjs/auth`をインストールしていく。

```
$ yarn add @nuxtjs/auth
```

インストールが完了したら`nuxt.config.js`に色々書き込んでいく。

```nuxt.config.js
  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    // https://go.nuxtjs.dev/axios
    '@nuxtjs/axios',
    '@nuxtjs/auth' // 追加する
  ],

  // Axios module configuration: https://go.nuxtjs.dev/config-axios
  axios: {
    // Workaround to avoid enforcing hard-coded localhost:3000: https://github.com/nuxt-community/axios-module/issues/308
    baseURL: 'http://localhost:8000',
  },

  auth: {
    redirect: {
      login: '/auth/login',
      logout: '/', // ログアウトした後どこに遷移するかを指定する
      callback: false,
      home: '/mypage' // ログインした後どこに遷移するかを指定する
    },
    strategies: {
      local: {
        endpoints: {
          login: {url: '/api/login', method: 'post', propertyName: 'token'},
          logout: {url: '/api/logout', method: 'post'},
          user: {url: '/api/user', method: 'get', propertyName: 'user'},
        }
      }
    }
  },
```

また、`@nuxt-auth`を利用するにはstoreディレクトリ内にjsファイルが無いといけない。
空でもいいので作成しておく。

```
$ copy nul store/index.js
```
linuxやmacOSの場合は`copy nul`ではなく`touch`コマンドを使う


※ここで一体何をやっているか分からない場合はぜひ公式ドキュメントを…！

https://auth.nuxtjs.org/api/options

次にログインフォームの画面とログイン後遷移する画面を作成する。
あと少し！

```
$ copy nul pages/auth/login.vue
$ copy nul pages/mypage.vue
```

```/pages/auth/login.vue
<template>
  <div>
    <div>
      <label for="email">Email</label>
      <input type="email" v-model="email" placeholder="email">
    </div>
    <div>
      <label for="password">Password</label>
      <input type="password" v-model="password" placeholder="password">
    </div>
    <div>
      <button @click="login">Login</button>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return {
      email:'',
      password:''
    }
  },
  methods: {
    async login() {
      try {
        await this.$auth.loginWith('local', {
          data: {
            email: this.email,
            password: this.password
          }
        })
      } catch (err) {
        console.log(`error: ${err}`)
      }
    }
  }
}
</script>
```

```pages/mypage.vue
<template>
  <div>
    <p>{{ userName }}さんがログインしています</p>
    <button @click="$auth.logout()">ログアウト</button>
  </div>
</template>

<script>
export default {
  middleware: ['auth'], // この記載のあるページはログインしていないと見れなくなる
  data() {
    return {
      userName: this.$auth.user.name // this.$auth.user.nameでログインしているユーザー名が取得できる
    }
  }
}
</script>
```

これでnuxt.js側の作成は完了しました。

# 実際にnuxt.jsからログインしてみる

※laravelAPIの作成については下記参照

https://qiita.com/ryuki1126/items/b52b879912f1466c1ef0

laravelを起動させる
```
$ cd sample-api
$ php artisan serve
```

nuxt.jsを起動させる
```
$ cd sample.web
$ yarn dev
```

ブラウザで`http://localhost:3000/auth/login`にアクセスする

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/878891/a1839a2f-e69b-2e34-383b-f724a2d70242.png)

Email, Passwordをそれぞれ入力して下記画面に遷移すれば成功！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/878891/18bdf1d2-e7e4-6947-bfa3-db73db29899c.png)

Logoutボタンを押すと`nuxt.confug.js`で設定した通り`/`に遷移する。

以上です。
お疲れ様でした！