laravel使用ajax登录,和自定义生成验证码
warning:
这篇文章距离上次修改已过192天,其中的内容可能已经有所变动。
在Laravel中使用AJAX登录,并结合自定义生成验证码的步骤如下:
- 安装
laravel/ui
包并运行auth
命令生成认证路由和视图。
composer require laravel/ui
php artisan ui vue --auth
npm install
npm run dev
- 修改登录表单以使用AJAX提交。
在resources/views/auth/login.blade.php
文件中,修改表单以使用AJAX提交:
<form id="loginForm" method="POST" action="{{ route('login') }}">
@csrf
<!-- 其他输入字段 -->
</form>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$('#loginForm').submit(function(e) {
e.preventDefault();
$.ajax({
type: 'POST',
url: $(this).attr('action'),
data: $(this).serialize(),
success: function(response) {
// 登录成功后的操作
console.log('登录成功');
},
error: function(xhr) {
// 登录失败后的操作
console.error('登录失败');
}
});
});
});
</script>
- 创建自定义中间件来生成和验证验证码。
在app/Http/Middleware
目录下创建一个新的中间件CaptchaMiddleware.php
:
namespace App\Http\Middleware;
use Closure;
use Illuminate\Http\Request;
use CaptchaIntegration; // 假设有这样的集成类
class CaptchaMiddleware
{
public function handle(Request $request, Closure $next)
{
if ($request->isMethod('POST')) {
$captcha = $request->input('captcha');
if (!CaptchaIntegration::verify($captcha)) {
return response()->json(['message' => 'Invalid captcha'], 401);
}
}
return $next($request);
}
}
- 在
app/Http/Kernel.php
中注册中间件,并将其分配给登录路由。
protected $routeMiddleware = [
// ...
'captcha' => \App\Http\Middleware\CaptchaMiddleware::class,
];
// 分配给登录路由
protected $middlewareGroups = [
'web' => [
// ...
'captcha:login',
],
];
- 在控制器中处理AJAX请求。
修改app/Http/Controllers/Auth/LoginController.php
:
namespace App\Http\Controllers\Auth;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use Illuminate\Foundation\Auth\AuthenticatesUsers;
class LoginController extends Controller
{
use AuthenticatesUsers;
protected $redirectTo = '/home';
public function __construct()
{
$this->middleware
评论已关闭