一起來實現單使用者登入 —— 準備工作

先看成果：

單使用者登入的作用？

單使用者登入可以保障網站的權益和使用者的賬號安全。

從網站角度來說： 假如一個站長創辦了一個有會員付費機制的內容網站，他肯定不希望使用者共享賬號給他人共享使用，這樣會影響網站的收入。

從使用者角度來說： 像 QQ 這樣的應用，當其他裝置登入你的賬號時，必須要頂掉之前的賬號，並且傳送通知來告訴使用者的賬號在其他地方登入了，可能有被盜風險。

下面我們一起來實現單使用者登入功能吧！

建立應用

composer create-project laravel/laravel single-user-login --prefer-dist

執行

composer install

新增前端模板，我們僅在開發環境中使用，因為正式的生產環境都是打包好的前端檔案，不需要載入這個包，所以我們新增 --dev 引數。

composer require laravel/ui --dev

引入 Vue 和 Bootstrap

php artisan ui bootstrap
php artisan ui vue

安裝前端依賴並編譯

npm install && npm run dev

如果你遇到了以下報錯：

Error: Cannot find module 'webpack/lib/rules/DescriptionDataMatcherRulePlugin'

嘗試升級 vue-loader

npm update vue-loader

現在前端檔案應該編譯成功了，因為我們要編寫一些前端程式碼，所以還需要配置一下 laravel mix，讓開發流程更順暢。

開啟專案根目錄的 webpack.mix.js 檔案：

mix.js('resources/js/app.js', 'public/js')
    .vue().version()  // 新增 .version() 避免快取
    .sass('resources/sass/app.scss', 'public/css');

mix.browserSync({
    proxy: 'single-user.test' // 你的本地專案地址
});

我們使用了 broswerSync 這樣就不需要每次更改前端程式碼後都去 F5 重新整理頁面。

再次執行

npm run watch

這時，你的瀏覽器應該會自動開啟專案地址，並且每次修改前端程式碼都會自動重新整理。

一切準備就緒，下面我們只需要專注開發部分就可以了。

本作品採用《CC 協議》，轉載必須註明作者和本文連結