vue实现找回密码源码
以下是一个基于Vue.js的找回密码功能实现方案，包含前端页面逻辑和关键代码示例：
找回密码表单组件
<template>
<div class="forgot-password">
<form @submit.prevent="handleSubmit">
<input
v-model="email"
type="email"
placeholder="注册邮箱"
required
>
<button type="submit">发送重置链接</button>
</form>
<p v-if="message" :class="{ error: isError }">{{ message }}</p>
</div>
</template>
<script>
export default {
data() {
return {
email: '',
message: '',
isError: false
}
},
methods: {
async handleSubmit() {
try {
const response = await axios.post('/api/password/email', {
email: this.email
});
this.message = response.data.message;
this.isError = false;
} catch (error) {
this.message = error.response.data.message || '请求失败';
this.isError = true;
}
}
}
}
</script>密码重置组件
<template>
<div class="reset-password">
<form @submit.prevent="handleSubmit">
<input
v-model="password"
type="password"
placeholder="新密码"
required
>
<input
v-model="password_confirmation"
type="password"
placeholder="确认密码"
required
>
<input type="hidden" v-model="token">
<button type="submit">重置密码</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
password: '',
password_confirmation: '',
token: this.$route.query.token || '',
email: this.$route.query.email || ''
}
},
methods: {
async handleSubmit() {
if (this.password !== this.password_confirmation) {
alert('两次密码输入不一致');
return;
}
try {
await axios.post('/api/password/reset', {
email: this.email,
password: this.password,
password_confirmation: this.password_confirmation,
token: this.token
});
this.$router.push('/login');
} catch (error) {
console.error(error);
}
}
}
}
</script>路由配置示例
const routes = [
{
path: '/forgot-password',
component: ForgotPassword
},
{
path: '/reset-password',
component: ResetPassword
}
];后端API接口规范
前端需要对接以下API端点：
- 发送重置邮件：
POST /api/password/email - 重置密码：
POST /api/password/reset
密码强度验证
可在前端添加密码强度验证：
validatePassword(password) {
const regex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$/;
return regex.test(password);
}注意事项
- 确保使用HTTPS协议传输敏感数据
- 重置链接应设置有效期（通常24小时）
- 前端验证不能替代后端验证
- 使用axios拦截器处理全局错误
- 密码重置成功后应强制用户重新登录
以上代码需要配合后端服务实现完整的密码找回功能，后端应负责生成重置令牌、发送邮件和实际更新密码等操作。
