通过邮件激活用户功能

在开发用户注册功能时，有时需要通过邮件来激活用户。本文将介绍如何实现通过邮件激活用户的功能。

用户注册完成后，系统会向用户的注册邮箱发送一封激活邮件。用户点击邮件中的激活链接后，系统将激活用户，并跳转到登录页面。

注册路由

激活邮箱的URL形式如下：

域名/activate/参数1/参数2

其中参数1和参数2都是变化的。结合djoser的user/create接口，发现参数1和参数2分别对着uid和token。

首先我们需要先来配置路由。在index.js中配置如下内容：

frontend/src/router/index.js

import ActivateEmail from '../views/ActivateEmail.vue'

const routes = [
  ...
  {
    path: "/activate/:uid/:token",
    name: "ActivateEmail",
    component: ActivateEmail
  },
  
]

代码解析

这段代码是Vue.js路由配置的一部分，通常用于定义URL路径和它们对应的视图组件。代码使用了Vue Router，一个用于Vue.js的官方路由管理器。以下是详细的解释：

1. 导入语句:

   • import ActivateEmail from '../views/ActivateEmail.vue': 这行代码从../views目录导入名为ActivateEmail的Vue组件。.vue文件是一个单文件组件，它包含该组件的模板、JavaScript逻辑和可选的样式。

2. 路由配置:

   • const routes = [...]: 定义一个名为routes的数组，数组中的每个对象都是一个路由定义。
   • 路由对象中，path: "/activate/:uid/:token"定义了URL路径。这个路径包含两个动态片段：:uid和:token。这意味着任何符合/activate/something/somethingelse形式的URL都将与这个路由匹配。something和somethingelse将被解析为uid和token的值，并且可以在对应的组件内访问。
   • name: "ActivateEmail"为路由命名，这在编程式导航（如this.$router.push({ name: 'ActivateEmail', params: { uid: '123', token: 'abc' } })）时非常有用。
   • component: ActivateEmail指定了当URL匹配/activate/:uid/:token时应该渲染的组件，即ActivateEmail.vue。

这个路由配置是用户邮箱激活功能的一部分。假设用户在注册后会收到一个包含特定uid（用户标识）和token（激活令牌）的激活链接。用户点击链接后，应用会导航到/activate/:uid/:token，并渲染ActivateEmail组件。ActivateEmail组件可能会使用这些参数（uid和token）向后端验证请求，并激活用户的邮箱。

这种模式在需要邮箱验证的注册流程中很常见，提供了一种安全的方式来确保用户拥有他们所提供的邮箱地址。

创建视图

接下来，在views下新建ActivateEmail.vue文件，

frontend/src/views/ActivateEmail.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 items-center justify-center">
            <div class="w-1/4 p-4 bg-gray-100 rounded-lg shadow-lg">
                <div class="text-black text-center p-4">
                    请点击下方按钮，激活账号
                </div>
                <div class="flex justify-center">
                    <button v-on:click="activate" class="bg-green-500 text-white px-4 py-2 rounded">激活账号</button> 
                </div>
            </div>
        </div>
        <Footer/>
    </div>
</template>

页面效果如下图所示。

实现交互逻辑

点击“激活账号”按钮，实现激活邮箱逻辑，代码如下：

frontend/src/views/ActivateEmail.vue

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

export default {
    name: 'ActivateEmail',
    components: { Header, Footer},
    methods: {
        activate() {
            const uid = this.$route.params.uid
            const token = this.$route.params.token
            const formData = {
                uid: uid,
                token: token
            }            
            axios
                .post('/api/users/activation/', formData)
                .then( response => {
                    showMessage('账号激活成功，请在登录页登录', 'info', ()=>{
                        this.$route.push({name: 'Login'})
                    })
                })
                .catch( error => {
                    console.log(error)
                    const errorData = error.response.data
                    const errorMessage = Object.values(errorData).flat();
                    for (let i=0; i<errorMessage.length; i++) {
                        showMessage(errorMessage[i])
                    }
                })

        }
    },
    
}
</script>

代码解析

这段代码是Vue.js组件的脚本部分，组件名为'ActivateEmail'。它似乎用于处理用户邮箱激活的流程。以下是详细的代码解释：

1. 导入依赖:

   • import Header from '@/components/Header.vue' 和 import Footer from '@/components/Footer.vue': 这些语句导入了两个组件，Header和Footer，它们很可能用于显示页面的头部和底部。
   • import showMessage from '@/utils/message.js': 导入了一个用于显示消息的函数，可能是为了在用户界面上显示通知或错误信息。
   • import axios from 'axios': 导入了axios库，一个流行的HTTP客户端，用于与后端服务进行通信。

2. 组件定义:

   • export default { ... }: 导出Vue组件。
   • name: 'ActivateEmail': 组件的名称是'ActivateEmail'。
   • components: { Header, Footer}: 在这个组件中注册了Header和Footer组件，使它们可以在此组件的模板中使用。

3. 方法定义:

   • methods: { activate() { ... } }: 定义了一个名为activate的方法。

4. 邮箱激活逻辑:

   • 获取参数: 方法首先从当前路由的参数中提取uid和token。
   • 构建请求数据: 创建一个包含uid和token的formData对象。
   • 发送激活请求: 使用axios发送POST请求到/api/users/activation/。这个请求似乎用于激活用户的邮箱，使用uid和token作为请求的一部分。

5. 处理响应:

   • 成功处理: 如果请求成功，会显示“账号激活成功，请在登录页登录”的信息，然后导航到登录页面。这是通过showMessage函数显示消息，然后调用this.$router.push({name: 'Login'})导航到登录页实现的。
   • 错误处理: 如果请求失败，会从error.response.data获取错误信息，并显示。这里假设错误信息是在响应的data字段中，并且是一个对象，其值是需要显示的错误消息的数组。代码会遍历这些消息并逐一显示。

总结来说，这个组件实现了用户邮箱激活的逻辑，包括从URL参数中获取uid和token，使用这些信息向后端发送激活请求，并根据响应显示相应的消息或导航到其他页面。

页面运行效果如下所示。

总结

通过以上步骤的实现，我们成功完成了通过邮件激活用户的功能。用户点击激活链接后，后端将激活用户，并在前端页面上提示激活成功，并跳转到登录页面。

下一节课，我们将继续实现用户登录的功能。