Я использую laravel 7 и аутентификацию по умолчанию с ajax входом в систему и регистрацией и bootstrap 4 модальным окном. Но после входа в систему повторно отправьте ссылку для проверки и во время регистрации появится сообщение «Ошибка несоответствия токена CSRF», вот мой код ниже:
#ajax setup#
$(function(){
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
});
//login with ajax
$(function(){
$("#loginForm").on("submit", function(e){
e.preventDefault();
var form = $(this);
var url = form.attr("action");
var type = form.attr("method");
var data = new FormData(form[0]);
//console.log(data.response);
$.ajax({
url: url,
data: data,
type: type,
processData:false,
contentType: false,
success:function(){
//reset form data
$( '#loginForm' ).each(function(){
this.reset();
});
$('#login').modal('hide');
$(".top_header_area").load('/'+ ' .top_header_area');
//success message
toastr.success('Login Successfull <i class="fas fa-smile"></i>','Success',{
closeButton: true,
progressBar: true
});
},
error:function(xhr,status,error){
//console.log(xhr.status);
//console.log(xhr.responseJSON.message);
if(xhr.status === 403){
$('#login').modal('hide');
//reload header panel
$(".top_header_area").load('/'+ ' .top_header_area');
$('#verify').modal('show');
toastr.error(xhr.responseJSON.message,'Error',{
closeButton: true,
progressBar: true
});
}
errors = xhr.responseJSON.errors;
$.each(errors, function(key, value){
//shows error message
toastr.error(value,'Error',{
closeButton: true,
progressBar: true
});
});
},
});
});
});
//Register with ajax
$(function(){
$("#registerForm").on("submit", function(e){
e.preventDefault();
var form = $(this);
var url = form.attr("action");
var type = form.attr("method");
var data = new FormData(form[0]);
//console.log(data.response);
$.ajax({
url: url,
data: data,
type: type,
processData:false,
contentType: false,
success:function(){
//reset form data
$( '#registerForm' ).each(function(){
this.reset();
});
$('#register').modal('hide');
//success message
toastr.success('Registration Successfull <i class="fas fa-smile"></i>','Success',{
closeButton: true,
progressBar: true
});
},
error:function(xhr,status,error){
if(xhr.status === 403){
$('#register').modal('hide');
//reload header panel
$(".top_header_area").load('/'+ ' .top_header_area');
$('#verify').modal('show');
toastr.error(xhr.responseJSON.message,'Error',{
closeButton: true,
progressBar: true
});
}
errors = xhr.responseJSON.errors;
$.each(errors, function(key, value){
//shows error message
toastr.error(value,'Error',{
closeButton: true,
progressBar: true
});
});
},
});
});
});
//request verification email
$(function(){
$("#resendLink").on("submit", function(e){
e.preventDefault();
var form = $(this);
var url = form.attr("action");
var type = form.attr("method");
var data = new FormData(form[0]);
$.ajax({
url: url,
type: type,
data: data,
processData:false,
contentType: false,
success:function(){
$(".top_header_area").load('/'+ ' .top_header_area');
//reset form data
$( '#resendLink' ).each(function(){
this.reset();
});
$('#verify').modal('hide');
//success message
toastr.success('Verification Link Send <i class="fas fa-smile"></i>','Success',{
closeButton: true,
progressBar: true
});
},
});
});
});
, когда я проверяю вкладку сети в браузере Запрос Кука ie и Ответ Кука ie значение отличается, и я использую ссылку для входа в систему, регистрации, повторной отправки, все формы в модале в одном app.blade. php макет блейда. после входа в систему при нажатии на кнопку «Отправить ссылку подтверждения» отображается «несоответствие токена csrf», но после refre sh страница работает! Я отправляю 2 ajax запрос с той же страницы .... 1. войдите 2. повторно отправьте ссылку для подтверждения
, но регистрационная форма отправляет 1 ajax запрос, но снова показывает ту же ошибку.
формы ниже:
<!-- Modal -->
<div class="modal fade" id="login" tabindex="-1" role="dialog" aria-labelledby="loginTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content wow fadeInUp" data-wow-delay=".3s">
<div class="modal-header">
<h5 class="modal-title" id="loginTitle"><i class="fas fa-sign-in-alt"></i> LOGIN</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body contact-form">
<form id="loginForm" action="{{ route('login') }}" method="post">
@csrf
<div class="form-group">
<input id="loginEmail" type="email" placeholder="Email Address" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" autocomplete="email" autofocus>
</div>
<div class="form-group">
<input id="LoginPassword" placeholder="Password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" autocomplete="current-password">
</div>
<div class="form-group">
<div class="custom-control custom-checkbox">
<input class="custom-control-input" type="checkbox" name="remember" id="remember" {{ old('remember') ? 'checked' : '' }}>
<label class="custom-control-label" for="remember">
{{ __('Remember Me') }}
</label>
</div>
</div>
<button class="btn btn-lg btn-block text-uppercase button" type="submit">{{ __('Login') }}</button>
<hr>
@if (Route::has('password.request'))
<a class="btn btn-link link" href="#" data-dismiss="modal" data-toggle="modal" data-target="#reset">
{{ __('Forgot Your Password?') }}
</a>
@endif
<hr class="my-4">
<p>Don't have account? <a href="#" class="link" data-dismiss="modal" data-toggle="modal" data-target="#register">Register</a></p>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn button" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- ****** Register modal Start ****** -->
<!-- Modal -->
<div class="modal fade" id="register" tabindex="-1" role="dialog" aria-labelledby="registerTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content wow fadeInUp" data-wow-delay=".3s">
<div class="modal-header">
<h5 class="modal-title" id="registerTitle"><i class="fas fa-user-plus"></i> REGISTER</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body contact-form">
<form id="registerForm" action="{{ route('register') }}" method="post">
@csrf
<div class="form-group">
<input id="name" type="text" placeholder="Name" class="form-control @error('name') is-invalid @enderror" name="name" value="{{ old('name') }}" autocomplete="name" autofocus>
</div>
<div class="form-group">
<input id="username" type="text" placeholder="Username" class="form-control @error('username') is-invalid @enderror" name="username" value="{{ old('username') }}" autocomplete="username" autofocus>
</div>
<div class="form-group">
<input id="registerEmail" type="text" placeholder="E-mail" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" autocomplete="email" autofocus>
</div>
<div class="form-group">
<input id="registerPassword" type="password" placeholder="Password" class="form-control @error('password') is-invalid @enderror" name="password" autocomplete="new-password">
</div>
<div class="form-group">
<input id="register-password-confirm" type="password" placeholder="Confirm Password" class="form-control" name="password_confirmation" autocomplete="new-password">
</div>
<button class="btn btn-lg btn-block text-uppercase button" type="submit">{{ __('Register') }}</button>
<hr class="my-4">
<p>Already REGISTERED<a href="#" class="link" data-dismiss="modal" data-toggle="modal" data-target="#login"> LOGIN</a></p>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn button" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- ****** Verify modal Start ****** -->
<!-- Modal -->
<div class="modal fade" id="verify" tabindex="-1" role="dialog" aria-labelledby="verifyTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content wow fadeInUp" data-wow-delay=".3s">
<div class="modal-header">
<h5 class="modal-title" id="verifyTitle"><i class="fas fa-certificate heading"></i> {{ __('Verify Your Email Address') }}</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
@if (session('resent'))
<div class="alert alert-success" role="alert">
{{ __('A fresh verification link has been sent to your email address.') }}
</div>
@endif
{{ __('Before proceeding, please check your email for a verification link.') }}
{{ __('If you did not receive the email') }},
<!-- <a href="javascript:void(0);" onclick="resend()" class="btn btn-link p-0 m-0 align-baseline link">{{ __('click here to request another') }}</a> -->
<form id="resendLink" class="d-inline" method="POST" action="{{ route('verification.resend') }}">
@csrf
<button type="submit" class="btn btn-link p-0 m-0 align-baseline">{{ __('click here to request another') }}</button>.
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn button" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>