Laravel7のログイン機能 

# 概要
Laravel7をインストール後にログイン機能を実装する。
その際`Vue`も使えるようにする。

# 前提
Laravel7がインストールされている
https://qiita.com/a05kk/items/9fbb06c4ff73ffeafae1

# 実装
## 1.パッケージのインストール
Composerを使い`laravel/uiパッケージ`をインストールする。
※バージョン指定しないとエラーが発生する。
```
composer require laravel/ui:^2.4
```

## 2.ログイン機能の実装
artisanコマンドでログイン／ユーザー登録機能が実装される。
※オプションの`--auth`が必要になる。また、これで`Vue`がpackage.jsonに記載される。
```
php artisan ui vue --auth
```
テーブルの追加
```
php artisan migrate
```
これで、一度画面を更新するとログインとレジスター（登録）ボタンが表示されているはず。

![login.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/329178/3d97f33b-b826-9305-8167-fccea5063186.png)

これでログイン機能の実装は完成だが、vueの構築が行われていないのでJS/CSSが適用されていない。（下記はLoginボタンクリック後）

![login_before.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/329178/eadab5bf-edd5-3830-df16-bf258cd5a828.png)

## 3.npmのインストール
筆者の環境にはnpmが入っていなかったのでnpmを入れる。

```
sudo yum install -y npm
```

```
npm install
```
```.error
added 1174 packages, and audited 1175 packages in 2m

72 packages are looking for funding
  run `npm fund` for details

31 vulnerabilities (14 moderate, 17 high)

To address issues that do not require attention, run:
  npm audit fix

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.
npm notice
npm notice New minor version of npm available! 8.5.0 -> 8.8.0
npm notice Changelog: https://github.com/npm/cli/releases/tag/v8.8.0
npm notice Run npm install -g npm@8.8.0 to update!
npm notice
```
脆弱性を含むパッケージがあるということなので、脆弱性を含むパッケージを利用しないバージョンに強制的に戻す。

```
npm audit fix --force
```
```
added 136 packages, removed 538 packages, changed 165 packages, and audited 773 packages in 57s

76 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
```

## 4.ビルドする

```
npm run dev
```

```.error
[webpack-cli] Error: Unknown option '--hide-modules'
```
`--hide-modules`というモジュルーはないよ、というエラー。
また、Laravel5以前は使えていたが6系以降は使えなくなったらしい。
というわけで該当箇所を削除する。

```pacage.json
//削除前
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
```
```pacage.json
//削除後
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --config=node_modules/laravel-mix/setup/webpack.config.js"
```

## 5.再びビルドに挑戦
```
npm run dev
```

```.error
ERROR in ./resources/js/components/ExampleComponent.vue 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <template>
|     <div class="container">
|         <div class="row justify-content-center">
```

このエラーは`Laravel Mix`のバージョン6から仕様が変わったたために発生するものである。下記で修正を行う。

```webpack.mix.js
mix.js('resources/js/app.js', 'public/js').vue()
```
`.vue()`を追加する。

## 6.再々ビルド
```
npm run dev
```
成功した。
![build.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/329178/17a55cc9-a1d7-db7f-2824-a84f02b1620e.png)

## 7.ログイン画面の確認
JS・CSSが適用された
![login.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/329178/b561aa01-07bc-6f6c-bb44-56e7c424487b.png)


# 参考
・[更新！！Laravel6/7 (laravel/ui)でのLogin機能の実装方法〜MyMemo](https://qiita.com/daisu_yamazaki/items/a914a16ca1640334d7a5)
・[Laravel 7.x JavaScriptとCSSスカフォールド](
https://readouble.com/laravel/7.x/ja/frontend.html)
・[laravel/ui - Packagist](https://packagist.org/packages/laravel/ui)
・[npm パッケージのバージョンアップと脆弱性対応 – rinoguchi's techlog](
https://rinoguchi.net/2021/11/npm-version-up-and-fix-audit.html)
・[【Laravel】npm run devを実行したら –hide-modulesエラーが出た時の対処法 - SAUNABOUYA.HTML](
https://saunabouya.com/2021/06/15/%E3%80%90laravel%E3%80%91npm-run-dev%E3%82%92%E5%AE%9F%E8%A1%8C%E3%81%97%E3%81%9F%E3%82%89-hide-modules%E3%82%A8%E3%83%A9%E3%83%BC%E3%81%8C%E5%87%BA%E3%81%9F%E6%99%82%E3%81%AE%E5%AF%BE%E5%87%A6/)
・[【Laravel Mix】 npmのパッケージをupgradeしたらコンパイルできなくなった | Zakkuriブログ](https://zakkuri.life/laravel-mix-npm%E3%81%AE%E3%83%91%E3%83%83%E3%82%B1%E3%83%BC%E3%82%B8%E3%82%92upgrade%E3%81%97%E3%81%9F%E3%82%89%E3%82%B3%E3%83%B3%E3%83%91%E3%82%A4%E3%83%AB%E3%81%A7%E3%81%8D%E3%81%AA%E3%81%8F/)