学习指东：使用 Laravel Jetstream

体验了三天，过程很丝滑，结果很骨感：Laravel Jetstream 提供了两种预设来实现，各有千秋。

安装

在安装时的选项：

• 0：将选择 Livewire，使用 blade 视图渲染前台的页面，这个很传统了YYDS；
• 1：将选择 Inertia，使用 vue 组件渲染前台的页面，实际上有一些小问题，具体内容在后面说明;

为了快速体验，直接创建新项目：

# --jet 创建项目
laravel new laravel_jet1 --jet

#选择 0 或 1，
Which Jetstream stack do you prefer?
  [0] livewire
  [1] inertia

#回车，默认不使用 team
Will your application use teams? (yes/no) [no]:

配置：

# 配置 .env，包括数据库和邮件
MAIL_MAILER=smtp
MAIL_HOST=smtp.qq.com
MAIL_PORT=587
MAIL_USERNAME=demo@qq.com
MAIL_PASSWORD=授权码
MAIL_ENCRYPTION=null
MAIL_FROM_ADDRESS=demo@qq.com

执行：

# 安装 UI 依赖
# [0]livewire 需要此操作
# [1]inertia 安装后自动执行，不过要根据实际的情况来判断
npm i
npm run dev/prod

# 执行数据库迁移，并启动项目
php artisan migrate
php artisan serve

到这里就能体验用户认证了，当然还要处理“邮件认证”。

邮件认证

两种预设，只在“返回页面”的写法上有区别，其它的一样：

# app/Models/User.php，继承 MustVerifyEmail
namespace App\Models;
use Illuminate\Contracts\Auth\MustVerifyEmail;

class User extends Authenticatable implements  MustVerifyEmail { }

添加“邮件认证”的路由，这里“Email 认证通知”（的返回页面）是 [0]livewire 的写法：

# routes/web.php，添加一些路由来处理邮件认证
// Email 认证通知
Route::get('/email/verify', function (Request $request) {
    if (empty($request->user()->email_verified_at)) {
        return view('auth.verify-email');
    } else {
        return redirect()->route('dashboard');
    }
})->middleware('auth')->name('verification.notice');

// Email 认证处理
Route::get('/email/verify/{id}/{hash}', function (EmailVerificationRequest $request) {
    $request->fulfill();
    return redirect()->route('dashboard');
})->middleware(['auth', 'signed'])->name('verification.verify');

// 重新发送 Email 认证邮件
Route::post('/email/verification-notification', function (Request $request) {
    $request->user()->sendEmailVerificationNotification();
    return back()->with('message', 'Verification link sent!');
})->middleware(['auth', 'throttle:6,1'])->name('verification.send');

[1]inertia 的写法：

// Email 认证通知
Route::get('/email/verify', function (Request $request) {
    if (empty($request->user()->email_verified_at)) {
        return Inertia::render('Auth/VerifyEmail');
    } else {
        return redirect()->route('dashboard');
    }
})->middleware('auth')->name('verification.notice');

打完收工！

页面

预设 [0]livewire 的页面在 resources/views/下 。
预设 [1]inertia 的页面在 resources/js/下：

• Jetstream/：是封装的组件；
• Layout/：是布局的组件；
• Pages/：是页面（的组件），通过 Inertia:render() 来渲染；

这里出现两个疑问：还要学习 inertia 框架？国际化咋搞？
呵呵，我是个战斗力 FIVE 的前端啊！不要怂，上去干！

[1]inertia

国际化

首先，[1]inertia 用的是 vue，而 vue 处于 v3 的大跨越时期。这个 vue i18n 就有点小问题，不过很容易解决：

#安装最新的版本
npm install vue-i18n@next 

用最新的版本就可以了，目前别用官方文档的 vue add i18n，会出问题。这 [1]inertia 用了 vue3，又不能切换 vue2 ，断我后了啊。

#想了想还是贴出报错：
 ERROR  Error: Cannot find module '@vue/cli-shared-utils'
Require stack:
- D:\test\laravel_jet1\node_modules\vue-cli-plugin-i18n\prompts.js
- D:\test\laravel_jet1\package.json
Error: Cannot find module '@vue/cli-shared-utils'
Require stack:
- D:\test\laravel_jet1\node_modules\vue-cli-plugin-i18n\prompts.js
- D:\test\laravel_jet1\package.json
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:889:15)
    at Function.resolve (internal/modules/cjs/helpers.js:98:19)
    at module.exports (D:\test\laravel_jet1\node_modules\vue-cli-plugin-i18n\prompts.js:4:38)
    at invoke (C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\lib\invoke.js:74:25)
    at processTicksAndRejections (internal/process/task_queues.js:95:5)

之后就简单了：

#创建 resources/js/i18n.js
import { createI18n } from "vue-i18n";

const i18n = createI18n({
  locale: "zh", //默认显示的语言
  messages: {
    zh: require("./Lang/zh"),
    en: require("./Lang/en"),
  },
});

export default i18n;

#创建 resources/js/Lang/zh.js
module.exports = {
  hello: "你好，世界！",
};

#创建 resources/js/Lang/en.js
module.exports = {
  hello: "Hello World.",
};

#修改 resources/js/app.js
import i18n from './i18n';

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => require(`./Pages/${name}.vue`),
    setup({ el, app, props, plugin }) {
        return createApp({ render: () => h(app, props) })
            .use(plugin)
            .use(i18n)
            .mixin({ methods: { route } })
            .mount(el);
    },
});

然后，直接使用：

{{ $t('hello') }}

访问特别慢的问题

看了下 F12 发现是本地环境缺失某个 js 插件：

#resources/views/app.blade.php
@env ('local')
    <script src="http://localhost:3000/browser-sync/browser-sync-client.js"></script>
@endenv

全局搜了下，按照 vender/mobiledetect/mobiledetectlib/docs/CONTRIBUTING.md 操作就可以了：

npm i -g browser-sync
browser-sync start --s . --f . --port 3000 --reload-debounce 1500 --no-ui

一些文档

• Laravel Jetstream 文档；
• Laravel Livewire 文档；
• Inertiajs 文档；
• browsersync 文档

插个空，双因子验证是个啥？登录后会失效旧的？怎么还有 google 身份验证器？

You may retrieve this token from your phone’s Google Authenticator application.
您可以从手机的 Google 身份验证器应用程序中检索此令牌。

本作品采用《CC 协议》，转载必须注明作者和本文链接