当前位置：首页 > VUE

vue实现忘记密码功能

2026-02-25 03:10:25VUE

实现忘记密码功能的前端流程

忘记密码功能通常包含以下核心步骤：用户输入邮箱或手机号、发送验证码、验证验证码、重置密码。以下是基于Vue的实现方案。

用户输入邮箱或手机号界面

创建表单组件收集用户注册时使用的邮箱或手机号，需包含基础验证逻辑。

vue实现忘记密码功能

<template>
  <form @submit.prevent="handleSubmit">
    <input v-model="account" placeholder="邮箱/手机号" />
    <button type="submit">发送验证码</button>
  </form>
</template>

<script>
export default {
  data() {
    return { account: '' }
  },
  methods: {
    handleSubmit() {
      if (!this.account) return alert('请输入账号')
      this.$emit('send-code', this.account)
    }
  }
}
</script>

验证码发送与校验界面

展示倒计时并允许用户输入验证码，需要与后端API交互。

<template>
  <div>
    <input v-model="code" placeholder="验证码" />
    <button @click="resendCode" :disabled="countdown > 0">
      {{ countdown > 0 ? `${countdown}s后重试` : '重新发送' }}
    </button>
    <button @click="verifyCode">验证</button>
  </div>
</template>

<script>
export default {
  data() {
    return { code: '', countdown: 0 }
  },
  methods: {
    startCountdown() {
      this.countdown = 60
      const timer = setInterval(() => {
        this.countdown--
        if (this.countdown <= 0) clearInterval(timer)
      }, 1000)
    },
    resendCode() {
      this.$emit('resend-code')
      this.startCountdown()
    },
    verifyCode() {
      this.$emit('verify-code', this.code)
    }
  }
}
</script>

密码重置界面

通过验证后显示新密码设置表单，需包含密码强度校验。

vue实现忘记密码功能

<template>
  <form @submit.prevent="resetPassword">
    <input v-model="newPassword" type="password" placeholder="新密码" />
    <input v-model="confirmPassword" type="password" placeholder="确认密码" />
    <button type="submit">重置密码</button>
  </form>
</template>

<script>
export default {
  data() {
    return { newPassword: '', confirmPassword: '' }
  },
  methods: {
    resetPassword() {
      if (this.newPassword !== this.confirmPassword) {
        return alert('两次输入密码不一致')
      }
      this.$emit('reset-password', this.newPassword)
    }
  }
}
</script>

状态管理与API调用

使用Vuex或Pinia管理忘记密码流程的状态，封装API请求方法。

// 示例API服务模块
export const authService = {
  async sendCode(account) {
    return axios.post('/api/auth/send-reset-code', { account })
  },
  async verifyCode(account, code) {
    return axios.post('/api/auth/verify-reset-code', { account, code })
  },
  async resetPassword(account, newPassword) {
    return axios.post('/api/auth/reset-password', { account, newPassword })
  }
}

路由配置与流程控制

配置Vue Router路由，控制各步骤的页面跳转逻辑。

const routes = [
  {
    path: '/forgot-password',
    component: ForgotPassword,
    children: [
      { path: '', component: AccountInput },
      { path: 'verify', component: CodeVerification },
      { path: 'reset', component: PasswordReset }
    ]
  }
]