Laravelにはログイン機能が提供されております。
composer と artisanを利用することで誰でも簡単にログイン・ユーザ登録・パスワードリセット機能が提供されます。
またLaravelのマニュアルだとログイン画面のレイアウトがキレイに表示されないという事象があります。
その点もこの記事では解説していきたいと思います。
目次
ログイン機能のダウンロードとインストールします。
composer を使用してLaravelパッケージ一覧からlaravel/uiを取得します。
取得後にartisanコマンドでインストールします。
composer require laravel/ui
php artisan ui vue --auth実行ログは以下になります。
root@af9bfbf61ece:/work# php artisan migrate
Cannot load Xdebug - it was already loaded
Nothing to migrate.
root@af9bfbf61ece:/work# composer require laravel/ui
Cannot load Xdebug - it was already loaded
1/5: https://packagist.jp/p/provider-latest$24f7749cf0676d65fab6ddba4f0e6a1cf750171b7ca6277553f2b9f90bfc71d0.json
2/5: https://packagist.jp/p/provider-2020-04$c13f9a1d06a349ae30a2c4b6e4abb4f7ac61fa8f01d407f49f799d34c9303e7e.json
3/5: https://packagist.jp/p/provider-2017$e120a60fa9e383b04583c4c98d214898b1831dd8a3a01087e43018913f79e008.json
4/5: https://packagist.jp/p/provider-2019-07$d5fba403bb091c37fc431ce187e648a7f2d4c5298baf2cb72c6dfba59c2da492.json
5/5: https://packagist.jp/p/provider-2020-01$08e20ed00139c45682220c59179291a6cafb36281f29c126180f648e0afebc55.json
Finished: success: 5, skipped: 0, failure: 0, total: 5
Using version ^2.0 for laravel/ui
./composer.json has been updated
Loading composer repositories with package information
Updating dependencies (including require-dev)
1/1: https://codeload.github.com/laravel/ui/legacy.zip/15368c5328efb7ce94f35ca750acde9b496ab1b1
Finished: success: 1, skipped: 0, failure: 0, total: 1
Package operations: 1 install, 0 updates, 0 removals
- Installing laravel/ui (v2.0.3): Loading from cache
Writing lock file
Generating optimized autoload files
> Illuminate\Foundation\ComposerScripts::postAutoloadDump
> @php artisan package:discover --ansi
Discovered Package: facade/ignition
Discovered Package: fideloper/proxy
Discovered Package: fruitcake/laravel-cors
Discovered Package: laravel/tinker
Discovered Package: laravel/ui
Discovered Package: nesbot/carbon
Discovered Package: nunomaduro/collision
Package manifest generated successfully.
31 packages you are using are looking for funding.
root@af9bfbf61ece:/work# php artisan ui vue --auth
Cannot load Xdebug - it was already loaded
Vue scaffolding installed successfully.
Please run npm install && npm run dev to compile your fresh scaffolding.
Authentication scaffolding generated successfully.以下の画面のようにLOGIN と REGISTER のボタンが出てくれば正常に動作せています。
ログイン画面のキレイに表示される
ただ実際にログイン画面に遷移してみると以下のようにCSSが反映されておらず、キレイに表示されていません。
これはLaravelのパッケージが不足しているために発生します。
解消するためにはnpmでWebpackパッケージをインストールしてあげましょう。
npm install
npm run dev以下が実行ログです。
root@af9bfbf61ece:/work# npm install
npm WARN npm npm does not support Node.js v10.19.0
npm WARN npm You should probably upgrade to a newer version of node as we
npm WARN npm can't make any promises that npm will work with this version.
npm WARN npm Supported releases of Node.js are the latest release of 4, 6, 7, 8, 9.
npm WARN npm You can find the latest version at https://nodejs.org/
npm WARN deprecated popper.js@1.16.1: You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1
npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN notice [SECURITY] set-value has the following vulnerability: 1 high. Go here for more details: https://www.npmjs.com/advisories?search=set-value&version=2.0.1 - Run `npm i npm@latest -g` to upgrade your npm version, and then `npm audit` to get more info.
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.2.7 (node_modules/chokidar/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {os:darwin,arch:any} (current: {os:linux,arch:x64})
npm WARN sass-loader@8.0.2 requires a peer of node-sass@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN sass-loader@8.0.2 requires a peer of fibers@>= 3.1.0 but none is installed. You must install peer dependencies yourself.
added 1094 packages from 494 contributors in 140.864s
root@af9bfbf61ece:/work# npm run dev
npm WARN npm npm does not support Node.js v10.19.0
npm WARN npm You should probably upgrade to a newer version of node as we
npm WARN npm can't make any promises that npm will work with this version.
npm WARN npm Supported releases of Node.js are the latest release of 4, 6, 7, 8, 9.
npm WARN npm You can find the latest version at https://nodejs.org/
> @ dev /work
> npm run development
npm WARN npm npm does not support Node.js v10.19.0
npm WARN npm You should probably upgrade to a newer version of node as we
npm WARN npm can't make any promises that npm will work with this version.
npm WARN npm Supported releases of Node.js are the latest release of 4, 6, 7, 8, 9.
npm WARN npm You can find the latest version at https://nodejs.org/
> @ development /work
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js
98% after emitting SizeLimitsPlugin
DONE Compiled successfully in 14372ms 7:36:00 PM
Asset Size Chunks Chunk Names
/css/app.css 177 KiB /js/app [emitted] /js/app
/js/app.js 1.4 MiB /js/app [emitted] /js/app完了すると以下のようにキレイに表示することができます。
