当前位置：首页 > VUE

vue实现找回密码源码

2026-01-07 04:34:10VUE

以下是一个基于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>