vue实现找回密码源码

以下是一个基于Vue.js的找回密码功能实现方案，包含前端页面逻辑与关键代码示例：

前端页面结构（Vue组件）

使用Vue 3的Composition API实现密码找回表单：

<template>
  <div class="forgot-password">
    <h3>找回密码</h3>
    <form @submit.prevent="handleSubmit">
      <div class="form-group">
        <label>邮箱地址</label>
        <input 
          type="email" 
          v-model="email"
          required
          placeholder="请输入注册邮箱"
        />
      </div>
      <button type="submit" :disabled="isLoading">
        {{ isLoading ? '发送中...' : '发送重置链接' }}
      </button>
      <div v-if="message" class="message" :class="{ error: isError }">
        {{ message }}
      </div>
    </form>
  </div>
</template>

业务逻辑实现

<script setup>
import { ref } from 'vue'
import axios from 'axios'

const email = ref('')
const message = ref('')
const isError = ref(false)
const isLoading = ref(false)

const handleSubmit = async () => {
  isLoading.value = true
  try {
    const response = await axios.post('/api/password/forgot', {
      email: email.value
    })
    message.value = response.data.message
    isError.value = false
  } catch (err) {
    message.value = err.response?.data?.message || '请求失败，请重试'
    isError.value = true
  } finally {
    isLoading.value = false
  }
}
</script>

重置密码页面

当用户点击邮件中的链接后，显示密码重置表单：

<template>
  <div class="reset-password">
    <h3>重置密码</h3>
    <form @submit.prevent="handleReset">
      <input type="hidden" v-model="token" />
      <div class="form-group">
        <label>新密码</label>
        <input 
          type="password" 
          v-model="newPassword"
          required
          minlength="8"
        />
      </div>
      <div class="form-group">
        <label>确认密码</label>
        <input 
          type="password" 
          v-model="confirmPassword"
          required
        />
      </div>
      <button type="submit">提交</button>
    </form>
  </div>
</template>

样式建议

<style scoped>
.forgot-password, .reset-password {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
}

.form-group {
  margin-bottom: 15px;
}

.message {
  margin-top: 15px;
  padding: 10px;
  border-radius: 4px;
}

.error {
  background-color: #ffebee;
  color: #f44336;
}
</style>

后端接口建议

1. 发送重置邮件接口（POST /api/password/forgot）

• 验证邮箱是否存在
• 生成唯一token并设置有效期（通常24小时）
• 发送含重置链接的邮件

1. 重置密码接口（POST /api/password/reset）

• 验证token有效性
• 检查两次密码输入是否一致
• 更新数据库密码
• 使token失效

安全注意事项

• 使用HTTPS协议传输数据
• 密码重置链接设置有效期
• 前端进行基础验证，后端必须再次验证
• 记录密码重置操作日志
• 限制同一IP的频繁请求

完整实现需要结合后端服务（如Node.js、Laravel等），以上代码提供了Vue前端的关键实现逻辑。实际项目中还需添加路由配置、表单验证等完整功能。