当前位置：首页 > VUE

Vue实现忘记密码模块

2026-02-23 02:37:18VUE

实现忘记密码功能

在Vue中实现忘记密码模块通常需要以下步骤，包括前端界面设计和后端API交互。

设计忘记密码界面

创建一个忘记密码表单，包含用户输入邮箱或手机号的字段，以及提交按钮。使用Vue的双向数据绑定处理用户输入。

<template>
  <div class="forgot-password">
    <h3>忘记密码</h3>
    <form @submit.prevent="submitForgotPassword">
      <div class="form-group">
        <label for="email">邮箱</label>
        <input
          type="email"
          id="email"
          v-model="email"
          required
          placeholder="请输入注册邮箱"
        />
      </div>
      <button type="submit" :disabled="isLoading">
        {{ isLoading ? '发送中...' : '发送重置链接' }}
      </button>
    </form>
    <p v-if="message">{{ message }}</p>
  </div>
</template>

处理表单提交

在Vue组件中实现表单提交逻辑，调用后端API发送密码重置邮件。

<script>
import axios from 'axios';

export default {
  data() {
    return {
      email: '',
      isLoading: false,
      message: '',
    };
  },
  methods: {
    async submitForgotPassword() {
      this.isLoading = true;
      this.message = '';
      try {
        const response = await axios.post('/api/auth/forgot-password', {
          email: this.email,
        });
        this.message = '密码重置链接已发送至您的邮箱，请查收';
      } catch (error) {
        this.message = error.response?.data?.message || '发送失败，请重试';
      } finally {
        this.isLoading = false;
      }
    },
  },
};
</script>

创建密码重置界面

设计一个接收重置令牌的新密码表单，允许用户设置新密码。

Vue实现忘记密码模块

<template>
  <div class="reset-password">
    <h3>重置密码</h3>
    <form @submit.prevent="submitResetPassword">
      <input type="hidden" v-model="token" />
      <div class="form-group">
        <label for="newPassword">新密码</label>
        <input
          type="password"
          id="newPassword"
          v-model="newPassword"
          required
          placeholder="请输入新密码"
        />
      </div>
      <div class="form-group">
        <label for="confirmPassword">确认密码</label>
        <input
          type="password"
          id="confirmPassword"
          v-model="confirmPassword"
          required
          placeholder="请再次输入新密码"
        />
      </div>
      <button type="submit" :disabled="isLoading">
        {{ isLoading ? '处理中...' : '重置密码' }}
      </button>
    </form>
    <p v-if="message">{{ message }}</p>
  </div>
</template>

实现密码重置逻辑

处理密码重置请求，验证令牌并更新用户密码。

<script>
import axios from 'axios';

export default {
  data() {
    return {
      token: this.$route.query.token || '',
      newPassword: '',
      confirmPassword: '',
      isLoading: false,
      message: '',
    };
  },
  methods: {
    async submitResetPassword() {
      if (this.newPassword !== this.confirmPassword) {
        this.message = '两次输入的密码不一致';
        return;
      }

      this.isLoading = true;
      try {
        const response = await axios.post('/api/auth/reset-password', {
          token: this.token,
          newPassword: this.newPassword,
        });
        this.message = '密码重置成功，请使用新密码登录';
        setTimeout(() => {
          this.$router.push('/login');
        }, 2000);
      } catch (error) {
        this.message = error.response?.data?.message || '密码重置失败';
      } finally {
        this.isLoading = false;
      }
    },
  },
};
</script>

路由配置

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

Vue实现忘记密码模块

import Vue from 'vue';
import Router from 'vue-router';
import ForgotPassword from './views/ForgotPassword.vue';
import ResetPassword from './views/ResetPassword.vue';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/forgot-password',
      name: 'forgot-password',
      component: ForgotPassword,
    },
    {
      path: '/reset-password',
      name: 'reset-password',
      component: ResetPassword,
      props: (route) => ({ token: route.query.token }),
    },
  ],
});