当前位置：首页 > VUE

vue实现忘记密码

2026-01-14 06:17:49VUE

Vue 实现忘记密码功能

前端实现

创建忘记密码页面 在 Vue 项目中创建一个忘记密码页面，通常命名为 ForgotPassword.vue。页面包含一个表单，用于输入邮箱或用户名。

<template>
  <div class="forgot-password">
    <h2>忘记密码</h2>
    <form @submit.prevent="submitForm">
      <div class="form-group">
        <label for="email">邮箱</label>
        <input type="email" id="email" v-model="email" required />
      </div>
      <button type="submit">提交</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      email: ''
    }
  },
  methods: {
    submitForm() {
      this.$axios.post('/api/forgot-password', { email: this.email })
        .then(response => {
          alert('密码重置链接已发送到您的邮箱')
        })
        .catch(error => {
          alert('发送失败，请重试')
        })
    }
  }
}
</script>

创建重置密码页面 创建一个重置密码页面 ResetPassword.vue，用于输入新密码。

<template>
  <div class="reset-password">
    <h2>重置密码</h2>
    <form @submit.prevent="submitForm">
      <div class="form-group">
        <label for="password">新密码</label>
        <input type="password" id="password" v-model="password" required />
      </div>
      <div class="form-group">
        <label for="confirmPassword">确认密码</label>
        <input type="password" id="confirmPassword" v-model="confirmPassword" required />
      </div>
      <button type="submit">提交</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      password: '',
      confirmPassword: ''
    }
  },
  methods: {
    submitForm() {
      if (this.password !== this.confirmPassword) {
        alert('两次输入的密码不一致')
        return
      }
      const token = this.$route.query.token
      this.$axios.post('/api/reset-password', { token, password: this.password })
        .then(response => {
          alert('密码重置成功')
          this.$router.push('/login')
        })
        .catch(error => {
          alert('密码重置失败')
        })
    }
  }
}
</script>

后端实现

生成重置密码链接 后端需要提供一个接口 /api/forgot-password，接收邮箱地址，生成一个包含唯一 token 的重置密码链接，并发送到用户邮箱。

app.post('/api/forgot-password', async (req, res) => {
  const { email } = req.body
  const user = await User.findOne({ email })
  if (!user) {
    return res.status(400).json({ message: '用户不存在' })
  }
  const token = crypto.randomBytes(20).toString('hex')
  user.resetPasswordToken = token
  user.resetPasswordExpires = Date.now() + 3600000 // 1小时过期
  await user.save()
  const resetLink = `http://yourdomain.com/reset-password?token=${token}`
  sendEmail(email, '重置密码', `请点击链接重置密码: ${resetLink}`)
  res.json({ message: '密码重置链接已发送到您的邮箱' })
})

验证 token 并重置密码 后端需要提供一个接口 /api/reset-password，验证 token 的有效性并更新密码。

app.post('/api/reset-password', async (req, res) => {
  const { token, password } = req.body
  const user = await User.findOne({
    resetPasswordToken: token,
    resetPasswordExpires: { $gt: Date.now() }
  })
  if (!user) {
    return res.status(400).json({ message: '链接已过期或无效' })
  }
  user.password = await bcrypt.hash(password, 10)
  user.resetPasswordToken = undefined
  user.resetPasswordExpires = undefined
  await user.save()
  res.json({ message: '密码重置成功' })
})

路由配置

在 Vue 路由中配置忘记密码和重置密码页面。

const routes = [
  {
    path: '/forgot-password',
    name: 'ForgotPassword',
    component: ForgotPassword
  },
  {
    path: '/reset-password',
    name: 'ResetPassword',
    component: ResetPassword
  }
]