laravel - Laravel 重置密码页面 -> 刀片视图到 vueJS 页面。csrf 令牌问题?
问题描述
我试图将我所有的 laravel 视图移动到 vuejs 视图。我认为它们相似并且发送相同的数据,但是 vueJS 页面不起作用......
email.blade.php 是重置密码的页面。我重写了所有代码:它发送一封带有重置密码令牌的电子邮件,我单击电子邮件链接。
使用 laravel 视图,它运行良好。使用 vueJS 视图,重置令牌无效。这是错误:此密码重置令牌无效。
知道有什么区别吗?
这是 vueJS 视图
<template>
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-body">
<form method="POST" v-on:submit.prevent>
<input type="hidden" name="token" v-model="token">
<div class="form-group row">
<label for="email" class="col-md-4 col-form-label text-md-right">{{$t('resetPwd.email')}}</label>
<div class="col-md-6">
<input id="email" type="email" v-model="email" class="form-control" name="email" required>
</div>
</div>
<p v-if="emailalreadyexists==false" class="error">{{$t('resetPwd.emailDoesntExist')}}</p>
<button @click="checkEmailExistsAndSend" class="btn-itra-green-white">
{{$t('resetPwd.sendLink')}}
</button>
<p v-if="emailsent==true">{{$t('resetPwd.okCheckMails')}}</p>
</form>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
nom: "login",
data () {
return {
APP_URL: process.env.MIX_APP_URL,
emailsent: false,
token: '',
csrf:'',
emailalreadyexists: true,
email :''
}
},
mounted()
{
this.token = $('meta[name="csrf-token"]').attr('content');
},
components: {
customimagepanel,whitepanel
},
methods:{
checkEmailExistsAndSend(){
this.emailalreadyexists=true;
this.emailsent=false;
if(this.email!=null && this.email!=undefined && this.email.length>5 && this.email.includes('@') )
{
axios.get('/registration/emailexists/' + this.email).then(
response => {
if(response.data==true){
this.emailalreadyexists=true;
console.log("emailalreadyexists");
this.pwdemail();
}
else{
this.emailalreadyexists=false;
console.log("!emailalreadyexists");
}
}
);
}
},
pwdemail(){
this.emailsent=true;
var bodyFormData = new FormData();
bodyFormData.set('_token', this.token);
bodyFormData.set('email', this.email);
axios({
method: 'post',
url: '/password/email',
data: bodyFormData,
config: { headers: {'Content-Type': 'multipart/form-data' }}
})
.then(function (response) {
console.log(response.data);
})
.catch(function (response) {
console.log(response);
});
}
}
}
</script>
这是原始刀片视图
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">{{ __('Reset Password') }}</div>
<div class="card-body">
@if (session('status'))
<div class="alert alert-success" role="alert">
{{ session('status') }}
</div>
@endif
<form method="POST" action="{{ route('password.email') }}">
@csrf
<div class="form-group row">
<label for="email" class="col-md-4 col-form-label text-md-right">{{ __('E-Mail Address') }}</label>
<div class="col-md-6">
<input id="email" type="email" class="form-control{{ $errors->has('email') ? ' is-invalid' : '' }}" name="email" value="{{ old('email') }}" required>
@if ($errors->has('email'))
<span class="invalid-feedback" role="alert">
<strong>{{ $errors->first('email') }}</strong>
</span>
@endif
</div>
</div>
<div class="form-group row mb-0">
<div class="col-md-6 offset-md-4">
<button type="submit" class="btn btn-primary">
{{ __('Send Password Reset Link') }}
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
解决方案
推荐阅读
- c# - 电报 API 身份验证“太快”
- x-cart - 如何修复 X-cart 产品页面?产品页面为空白
- ios - 自动布局约束边界条件
- angular - Angular 7 推荐的无需访问底层源代码即可操作 DOM 的方法
- r - 箱线图上的样本量
- kdb - 对传递的参数应用每个操作的 lambda 和投影组合的代码优化
- node.js - Actions-On-Google Card 字幕未显示在模拟器或 Android 手机中
- javascript - 为我的抵押贷款计算器实施递归计算
- jquery - jQuery Ui Slider - 如何防止工具提示显示在滑块下方?
- java - 无法解析 Criteria API 中的嵌入式实体