当前位置：首页 > VUE

vue实现找回密码源码

2026-01-12 05:00:48VUE

以下是一个基于 Vue.js 的找回密码功能实现方案，包含前端组件和后端交互逻辑的核心代码示例：

找回密码表单组件

<template>
  <div class="forgot-password">
    <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">{{ message }}</div>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      email: '',
      isLoading: false,
      message: ''
    }
  },
  methods: {
    async handleSubmit() {
      this.isLoading = true
      try {
        const response = await axios.post('/api/password/email', {
          email: this.email
        })
        this.message = response.data.message
      } catch (error) {
        this.message = error.response?.data?.message || '请求失败'
      } finally {
        this.isLoading = false
      }
    }
  }
}
</script>

密码重置组件

<template>
  <div class="reset-password">
    <form @submit.prevent="handleReset">
      <input type="hidden" v-model="token">
      <div class="form-group">
        <label>新密码</label>
        <input 
          type="password" 
          v-model="password"
          required
          minlength="8"
        >
      </div>
      <div class="form-group">
        <label>确认密码</label>
        <input 
          type="password" 
          v-model="password_confirmation"
          required
        >
      </div>
      <button type="submit" :disabled="isLoading">
        {{ isLoading ? '处理中...' : '重置密码' }}
      </button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      token: this.$route.query.token,
      email: this.$route.query.email,
      password: '',
      password_confirmation: '',
      isLoading: false
    }
  },
  methods: {
    async handleReset() {
      if (this.password !== this.password_confirmation) {
        alert('两次密码输入不一致')
        return
      }

      this.isLoading = true
      try {
        await axios.post('/api/password/reset', {
          email: this.email,
          token: this.token,
          password: this.password,
          password_confirmation: this.password_confirmation
        })
        this.$router.push('/login')
      } catch (error) {
        alert(error.response?.data?.message || '重置失败')
      } finally {
        this.isLoading = false
      }
    }
  }
}
</script>

路由配置示例

const routes = [
  {
    path: '/forgot-password',
    component: () => import('./views/ForgotPassword.vue')
  },
  {
    path: '/reset-password',
    component: () => import('./views/ResetPassword.vue')
  }
]

后端API接口示例（Node.js）

// 发送重置邮件
router.post('/password/email', async (req, res) => {
  const user = await User.findOne({ email: req.body.email })
  if (!user) {
    return res.status(400).json({ message: '邮箱未注册' })
  }

  const token = generateResetToken()
  user.resetPasswordToken = token
  user.resetPasswordExpires = Date.now() + 3600000 // 1小时有效
  await user.save()

  sendResetEmail(user.email, token)
  res.json({ message: '重置链接已发送到您的邮箱' })
})

// 重置密码
router.post('/password/reset', async (req, res) => {
  const user = await User.findOne({
    email: req.body.email,
    resetPasswordToken: req.body.token,
    resetPasswordExpires: { $gt: Date.now() }
  })

  if (!user) {
    return res.status(400).json({ message: '令牌无效或已过期' })
  }

  user.password = bcrypt.hashSync(req.body.password, 10)
  user.resetPasswordToken = undefined
  user.resetPasswordExpires = undefined
  await user.save()

  res.json({ message: '密码已重置' })
})