Laravel中如何实现页面加载前的验证码校验功能

整体思路 #

通过Laravel中间件拦截目标路由请求，校验用户是否已完成验证码验证，未验证则跳转至验证码页面，验证通过后放行至目标页面。

实现步骤 #

步骤1：安装验证码扩展包 #

使用主流的mews/captcha扩展实现验证码能力，执行安装命令：

composer require mews/captcha

安装完成后发布配置文件，可自定义验证码参数：

php artisan vendor:publish --provider="Mews\Captcha\CaptchaServiceProvider"

步骤2：创建自定义校验中间件 #

执行命令生成中间件：

php artisan make:middleware VerifyCaptchaBeforeAccess

编辑app/Http/Middleware/VerifyCaptchaBeforeAccess.php文件，编写拦截逻辑：

<?php
namespace App\Http\Middleware;
use Closure;
use Illuminate\Http\Request;
class VerifyCaptchaBeforeAccess
{
    public function handle(Request $request, Closure $next)
    {
        // 判断是否已通过验证码校验，有效期1小时可自行调整
        if (session()->has('captcha_verified') && session('captcha_verified') > now()) {
            return $next($request);
        }
        // 记录用户原本要访问的地址，验证成功后跳转
        session(['intended_url' => $request->fullUrl()]);
        // 跳转至验证码页面
        return redirect()->route('captcha.show');
    }
}

步骤3：注册中间件 #

编辑app/Http/Kernel.php文件，在$routeMiddleware数组中新增中间件别名：

protected $routeMiddleware = [
    // 其他已存在的中间件
    'captcha.check' => \App\Http\Middleware\VerifyCaptchaBeforeAccess::class,
];

步骤4：配置路由 #

在routes/web.php中配置路由：

// 需要前置验证码校验的目标页面，挂载captcha.check中间件
Route::get('/test', [\App\Http\Controllers\TestController::class, 'index'])->middleware('captcha.check')->name('test');
// 验证码页面路由
Route::get('/captcha', [\App\Http\Controllers\CaptchaController::class, 'show'])->name('captcha.show');
// 验证码提交校验路由
Route::post('/captcha/verify', [\App\Http\Controllers\CaptchaController::class, 'verify'])->name('captcha.verify');

步骤5：实现验证码校验逻辑 #

创建CaptchaController编写校验逻辑：

php artisan make:controller CaptchaController

编辑app/Http/Controllers/CaptchaController.php：

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class CaptchaController extends Controller
{
    // 显示验证码页面
    public function show()
    {
        return view('captcha');
    }
    // 校验验证码
    public function verify(Request $request)
    {
        $request->validate([
            'captcha' => 'required|captcha'
        ], [
            'captcha.captcha' => '验证码输入错误，请重新输入'
        ]);
        // 标记验证通过，有效期1小时
        session(['captcha_verified' => now()->addHour()]);
        // 跳转至用户原本要访问的地址，默认跳转到首页
        return redirect()->intended(route('home'));
    }
}

步骤6：编写验证码页面模板 #

在resources/views目录下创建captcha.blade.php：

<!DOCTYPE html>
<html>
<head>
    <title>请完成验证码校验</title>
</head>
<body>
    <form action="{{ route('captcha.verify') }}" method="post">
        @csrf
        <div>
            <img src="{{ captcha_src() }}" alt="验证码" onclick="this.src='{{ captcha_src() }}?'+Math.random()">
            <p>点击图片可刷新验证码</p>
        </div>
        <div>
            <input type="text" name="captcha" placeholder="请输入验证码">
            @error('captcha')
                <p style="color: red;">{{ $message }}</p>
            @enderror
        </div>
        <button type="submit">提交验证</button>
    </form>
</body>
</html>

注意事项 #

• 可编辑config/captcha.php文件自定义验证码的长度、字符类型、过期时间、样式等参数
• 若需要用户每次浏览器会话仅验证一次，可去掉session的过期时间设置，会话结束后验证标记会自动失效
• 多个需要前置校验的页面，直接给对应路由挂载captcha.check中间件即可复用能力

内容的提问来源于stack exchange，提问作者Himel shipu