一起来实现单用户登录 —— 准备工作

先看成果：

单用户登录的作用？

单用户登录可以保障网站的权益和用户的账号安全。

从网站角度来说： 假如一个站长创办了一个有会员付费机制的内容网站，他肯定不希望用户共享账号给他人共享使用，这样会影响网站的收入。

从用户角度来说： 像 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 协议》，转载必须注明作者和本文链接