当前位置：首页 > VUE

vue实现忘记密码

2026-03-07 22:53:15VUE

实现忘记密码功能

在Vue中实现忘记密码功能通常涉及前端界面设计、表单验证、与后端API交互等步骤。以下是一个完整的实现方案：

前端界面设计

创建忘记密码表单组件，包含邮箱输入框和提交按钮：

<template>
  <div class="forgot-password">
    <h3>忘记密码</h3>
    <form @submit.prevent="handleSubmit">
      <div class="form-group">
        <label for="email">邮箱地址</label>
        <input
          type="email"
          id="email"
          v-model="email"
          @blur="validateEmail"
          required
        />
        <span class="error" v-if="errors.email">{{ errors.email }}</span>
      </div>
      <button type="submit" :disabled="isSubmitting">
        {{ isSubmitting ? '发送中...' : '发送重置链接' }}
      </button>
    </form>
    <p v-if="successMessage" class="success">{{ successMessage }}</p>
  </div>
</template>

表单验证逻辑

实现邮箱验证和表单提交逻辑：

vue实现忘记密码

<script>
export default {
  data() {
    return {
      email: '',
      errors: {},
      isSubmitting: false,
      successMessage: ''
    }
  },
  methods: {
    validateEmail() {
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
      if (!this.email) {
        this.errors.email = '邮箱不能为空'
      } else if (!emailRegex.test(this.email)) {
        this.errors.email = '请输入有效的邮箱地址'
      } else {
        delete this.errors.email
      }
    },
    async handleSubmit() {
      this.validateEmail()
      if (Object.keys(this.errors).length) return

      this.isSubmitting = true
      try {
        const response = await axios.post('/api/auth/forgot-password', {
          email: this.email
        })
        this.successMessage = response.data.message || '重置链接已发送至您的邮箱'
      } catch (error) {
        if (error.response) {
          this.errors.email = error.response.data.message || '发送失败，请重试'
        } else {
          this.errors.email = '网络错误，请检查连接'
        }
      } finally {
        this.isSubmitting = false
      }
    }
  }
}
</script>

样式设计

添加基本样式增强用户体验：

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

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

label {
  display: block;
  margin-bottom: 5px;
}

input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

button {
  background-color: #42b983;
  color: white;
  padding: 10px 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}

.error {
  color: red;
  font-size: 12px;
}

.success {
  color: green;
  margin-top: 10px;
}
</style>

密码重置页面

创建密码重置页面组件，包含新密码和确认密码字段：

vue实现忘记密码

<template>
  <div class="reset-password">
    <h3>重置密码</h3>
    <form @submit.prevent="handleSubmit">
      <input type="hidden" v-model="token" />
      <div class="form-group">
        <label for="password">新密码</label>
        <input
          type="password"
          id="password"
          v-model="password"
          required
        />
      </div>
      <div class="form-group">
        <label for="passwordConfirm">确认密码</label>
        <input
          type="password"
          id="passwordConfirm"
          v-model="passwordConfirm"
          required
        />
      </div>
      <button type="submit" :disabled="isSubmitting">
        {{ isSubmitting ? '处理中...' : '重置密码' }}
      </button>
    </form>
  </div>
</template>

路由配置

在Vue路由中配置忘记密码和重置密码的路由：

const routes = [
  // 其他路由...
  {
    path: '/forgot-password',
    name: 'ForgotPassword',
    component: () => import('./views/ForgotPassword.vue')
  },
  {
    path: '/reset-password/:token',
    name: 'ResetPassword',
    component: () => import('./views/ResetPassword.vue'),
    props: true
  }
]

后端API交互

实现与后端API的交互逻辑：

// 在api.js中
export default {
  forgotPassword(email) {
    return axios.post('/api/auth/forgot-password', { email })
  },
  resetPassword({ token, password, passwordConfirm }) {
    return axios.post('/api/auth/reset-password', {
      token,
      password,
      passwordConfirm
    })
  }
}