非你网

为了测试， 我们需要写入一些用户信息。

生数据前奏

为了方便数据的丰满性，这里给用户增加了昵称，性别，头像，签名等字段，更新后的迁移数据是这样的。

        Schema::create('users', function (Blueprint $table) {
            $table->id();
            $table->string('account')->unique();
            $table->string('password');
            $table->string('nickname', 32)->comment('昵称');
            $table->unsignedTinyInteger('gender')->default(3)->comment('性别 1 男 2 女 3 未知');
            $table->string('avatar', 128)->nullable();
            $table->string('email')->unique();
            $table->string('signature')->nullable();
            $table->rememberToken();
            $table->timestamp('email_verified_at')->nullable();
            $table->timestamps();
        });

这里将 name 改成 account 了，email 后移了。使用 account 和 password 登录。而非 email。当然，account 你可以和 email 的数据一样。我个人喜好用手机作为 account。
继续阅读

身份验证使用 Laravel Sanctum

https://learnku.com/docs/laravel/8.x/sanctum/9421

安装 Laravel Sanctum

composer require laravel/sanctum

php artisan vendor:publish --provider="Laravel\Sanctum\SanctumServiceProvider"

php artisan migrate

继续阅读

在测试前期阶段 mock data 的确很有用。可测试后期和线上的时候，就需要用到真实环境数据。

操作一波

点击进去喵喵

关掉 mock

vue.config.js

# 注释掉这几行
  // devServer: {
  //   port: port,
  //   open: true,
  //   overlay: {
  //     warnings: false,
  //     errors: true
  //   },
  //   before: require('./mock/mock-server.js')
  // },

src/main.js

# 注释掉这几行
// if (process.env.NODE_ENV === 'production') {
//   const { mockXHR } = require('../mock')
//   mockXHR()
// }

到此，mock data 已经关掉了。然后运行 npm run dev 或 npm run build:prod 跑起来看看。打开网页，F12 打开控制台，选择 network, 选择 xhr。默认会进入到登录页面（刚运行没登录），输入用户名和密码，点击登录，这个时候，就可以看到请求地址了。地址是下边这样的。而这些只是在打包阶段。

http://192.168.1.141:8080/dev-api/vue-element-admin/user/login

既然我们禁用了 mock data，那我们怎么很好的控制请求了。vue-element-admin 这里使用了 axios，既然是 axios，那就可以去实现拦截器。
继续阅读