Skip to main content

通过邮件重置密码

上一节中，我们实现了忘记密码发送邮件的功能。当用户点击“发送邮件”按钮时，会向填写的邮箱中发送一封邮件，内容如下图所示。

图43-发送修改密码邮件

本节我们来实现通过点击链接，获取uid和token 这2个参数，来实现验证邮箱，并且实现重置密码的功能。

创建密码重置页面模板​

首先我们需要创建一个URL，用于用户点击后重置密码。该URL需要包含用户的UID和Token。在index.js中创建一个名为PasswordReset的URL，需要包含两个参数：UID和Token。代码如下：

frontend/src/router/index.js

import PasswordReset from '../views/PasswordReset'

  {
    path: '/password_reset/:uid/:token',
    name: 'PasswordReset',
    component: PasswordReset
  },

创建密码重置页面​

然后我们需要创建一个视图，用于处理密码重置操作。在src/views路径下新建PasswordReset.vue文件，代码如下：

frontend/src/views/PasswordReset.vue
<template>
  <div id="container" class="text-white text-sm bg-primary-300 min-h-screen pb-4">
    <Header />
    <div class="text-center text-2xl p-8">重置密码</div>
    <div class="flex justify-center">
      <div class="w-1/4 p-4 bg-gray-100 rounded-lg shadow-lg">
        <div class="text-black text-left p-4">
          <div class="items-start py-4">
            <span>新密码:</span>
            <input
              v-model="new_password"
              class="outline-0 h-9 rounded border border-green-600 placeholder-gray-400 px-2 py-1 w-full"
              type="text"
            />
          </div>

          <div class="items-start py-4">
            <span>确认密码:</span>
            <input
              v-model="re_new_password"
              class="outline-0 h-9 rounded border border-green-600 placeholder-gray-400 px-2 py-1 w-full"
              type="text"
            />
          </div>
        </div>
        <div class="flex justify-center">
          <button
            v-on:click="passwordReset"
            class="bg-green-500 text-white px-4 py-2 rounded"
          >
            提交
          </button>
        </div>
      </div>
    </div>
    <Footer />
  </div>
</template>

<script>
import Header from "@/components/Header.vue";
import Footer from "@/components/Footer.vue";
import axios from "axios";
import showMessage from "@/utils/message.js";

export default {
  name: "PasswordReset",
  components: { Header, Footer },

};
</script>

代码解析

这段代码实现了一个重置密码的表单,包含两个输入框和一个按钮:

  1. 第一个<div>包含一个"新密码"的span标签和一个输入框:
  • 输入框使用v-model绑定到new_password变量
  • 样式设置了边框、圆角等外观
  • type="text"表示输入类型是文本
  1. 第二个<div>包含一个"确认密码"的span标签和一个输入框:
  • 输入框使用v-model绑定到re_new_password变量
  • 样式设置了边框、圆角等外观
  • type="text"表示输入类型是文本
  1. 最后是一个按钮:
  • 绑定了v-on:click事件到passwordReset方法
  • 文字显示"提交"

所以这段代码通过两个输入框让用户输入新密码和确认密码,点击提交按钮会调用passwordReset方法。

这是一个常见的重置密码表单,允许用户设置新的密码。配合其他代码可以实现密码重置功能。

运行效果如下图所示。 图43-重置密码页面

处理密码重置请求​

当用户点击提交按钮后，我们需要在视图中处理密码重置请求。在视图中，我们首先需要验证新密码和确认密码是否一致。如果不一致，我们将显示一个错误消息并中止密码重置流程。

PasswordReset.vue逻辑代码如下：

frontend/src/views/PasswordReset.vue
<script>
import Header from "@/components/Header.vue";
import Footer from "@/components/Footer.vue";
import axios from "axios";
import showMessage from "@/utils/message.js";

export default {
  name: "PasswordReset",
  data: function () {
    return {
      uid: "",
      token: "",
      new_password: "",
      re_new_password: "",
    };
  },
  components: { Header, Footer },
  methods: {
    passwordReset() {
      const uid = this.$route.params.uid;
      const token = this.$route.params.token;
      const new_password = this.new_password.trim();
      const re_new_password = this.re_new_password.trim();
      if (new_password !== re_new_password) {
        showMessage("两次密码不一致！", "error");
        return;
      }
      const formData = {
        uid: uid,
        token: token,
        new_password: new_password,
        re_new_password: re_new_password,
      };
      axios
        .post("/api/users/reset_password_confirm/", formData)
        .then((response) => {
          showMessage("密码重置成功", "info", () => {
            this.$router.push({
              name: "Login",
            });
          });
        })
        .catch((error) => {
          const errorData = error.response.data;
          const errorMessage = Object.values(errorData).flat();
          for (let i = 0; i < errorMessage.length; i++) {
            showMessage(errorMessage[i]);
          }
        });
    },
  },
};
</script>

代码解析

  1. 从路由参数中获取uid和token,这应该是重置密码的验证信息。

  2. 定义新密码和确认密码的数据new_password、re_new_password。

  3. passwordReset方法中主要逻辑:

  • 检验两次输入的密码是否相同,不相同显示错误

  • 构造表单数据,包含uid、token和新密码

  • 调用axios发起POST请求,提交表单数据

  • 请求成功,显示成功提示,跳转到登录页

  • 请求失败,显示错误信息

  1. 模板可以显示输入表单,绑定新密码的数据。

  2. 提交按钮触发passwordReset方法。

总结一下,这段代码实现了密码重置页面的提交新密码功能:

  • 从路由获取验证信息
  • 输入新密码,校验后发起请求
  • 请求成功后,自动跳转登录页

配合路由、模板等实现了完整的重置密码功能流程。

运行效果如下图所示。

图43-重置密码

本教程介绍了如何通过邮件来重置用户的密码。首先，我们创建了一个密码重置URL，并使用Django的PasswordResetView视图来处理密码重置逻辑。然后，我们创建了一个用于展示密码重置页面的模板。最后，我们完成了密码重置请求的处理逻辑，并测试了密码重置功能。