登录页面实现

本文将指导您如何实现一个简单的登录页面，并使用axios库向后端发送登录请求。

创建路由

首先，在Router中注册一个名为login的路由，代码如下：

frontend/src/router/index.js

import Login from '../views/Login.vue'


const routes = [
  ...
    {
    path: "/login",
    name: "Login",
    component: Login
  }
]

创建登录页面

在View文件夹中创建一个名为Login.vue的组件，该组件将显示登录页面的内容。 在登录页面中，你可以使用静态页面的布局，包括头部信息、底部信息和弹窗信息。可以参考注册页面的布局进行复制。Login.vue代码如下：

frontend/src/views/Login.vue

<template>
    <div id="main-body" class="bg-primary-100 flex justify-center h-screen">
    <section class="container flex justify-center items-center rounded ">
        <div class="hidden md:block">
          <img src="../assets/images/bg.png" alt="" class="rounded-l max-h-[500px]">
        </div>
        <div class="rounded-r w-80 h-[500px] my-8 px-2 py-4 bg-white shadow shadow-gray-300">
          <div class="text-center text-lg py-6">用户登录</div>
          <form id="register_form" class="px-4">
            <div class="flex justify-left items-center relative h-10 px-4  my-2 rounded border-solid border border-gray-400">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-300 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
              </svg>
              <input v-model="username" type="text"  placeholder="请输入用户名" class="outline-0 text-sm">
            </div>
            <div class="flex justify-left items-center relative h-10 px-4  my-2 rounded border-solid border border-gray-400">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-300 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
              </svg>
              <input v-model="password" type="password"  placeholder="请输入密码" class="outline-0 text-sm">
            </div>
            <div class="pt-6">
              <button v-on:click.prevent="submitForm" id="login" class="rounded bg-green-500 w-full h-8 text-white">登录</button>
            </div>
            <div class="text-center text-sm my-2"> 
              <span class="text-left text-green-500">
                <router-link to="/reset_password">忘记密码?</router-link>
              </span>              
              没有账号
              <a class="text-blue-500" href="/register">去注册</a>
            </div>
          </form>
        </div>
    </section>
</div>

</template>

实现交互逻辑

当用户填写完用户名和密码后，点击“登录”按钮时，首先来对用户名和密码进行基本验证。比如是否为空，是否大于多少位等等，验证通过后，再去请求接口。Login.vue交互逻辑代码如下：

frontend/src/views/Login.vue

<script>
import showMessage from "@/utils/message.js";
import axios from "axios";

export default {
  name: "Login",
  data: function () {
    return {
      username: "",
      password: "",
    };
  },
  methods: {
    submitForm() {
      const username = this.username;
      const password = this.password;
      if (username === "") {
        showMessage("用户名不能为空");
        return;
      }
      if (password === "") {
        showMessage("密码不能为空");
        return;
      }
      const formData = {
        username: username,
        password: password,
      };
      axios
        .post("/api/jwt/create/", formData)
        .then((response) => {
          const token = response.data.access;
          const refreshToken = response.data.refresh;
          const username = this.username;
          localStorage.setItem("token", token);
          localStorage.setItem("refreshToken", refreshToken);
          localStorage.setItem("username", username);
          showMessage("登录成功", "info", () => {
            this.$router.push({
              name: 'home',
            });
          });
        })
        .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. 引入模块和库：

   • import showMessage from "@/utils/message.js";: 导入了一个名为 showMessage 的函数，该函数来自项目中的 @/utils/message.js 文件。这可能是一个用于显示提示消息的工具函数。
   • import axios from "axios";: 导入了 Axios 库，用于进行 HTTP 请求。

2. 导出组件对象：

   • export default { ... }: 导出一个包含组件相关配置的对象。

3. 组件配置对象：

   • name: "Login": 定义了组件的名称为 "Login"。
   • data: function () { ... }: 定义了组件的初始数据，包含 username 和 password 字段，初始化为空字符串。

4. 组件方法：

   • submitForm() { ... }: 定义了一个名为 submitForm 的方法，该方法用于处理登录表单的提交。
     • 提取用户输入的用户名和密码。
     • 检查用户名和密码是否为空，如果是，则调用 showMessage 函数显示相应的提示消息并返回。
     • 构建一个包含用户名和密码的表单数据对象 formData。
     • 使用 Axios 发送 POST 请求到 /api/jwt/create/，该请求用于获取用户的访问令牌和刷新令牌。
     • 处理成功的响应：提取令牌和刷新令牌，将它们存储在本地存储中，并设置登录状态。然后，根据路由中的查询参数进行重定向，并显示成功登录的提示消息。
     • 处理失败的响应：提取错误信息并使用 showMessage 函数显示错误消息。

5. localStorage 是 Web 浏览器提供的一种客户端存储机制，用于在用户的浏览器中存储数据。它允许将键值对存储在用户的本地浏览器中，并在会话之间保持数据的持久性。在上述代码中，localStorage 用于存储用户登录相关的信息，例如令牌、刷新令牌、用户名和过期时间。

   具体用法如下：

   • localStorage.setItem(key, value): 将键值对存储在 localStorage 中。
   • localStorage.getItem(key): 获取指定键的值。
   • localStorage.removeItem(key): 从 localStorage 中移除指定键的值。

   在上述代码中，以下信息被存储在 localStorage 中：

   1. Token信息：

      • localStorage.setItem("token", token): 存储访问令牌。
      • localStorage.setItem("refreshToken", refreshToken): 存储刷新令牌。

   2. 用户信息：

      • localStorage.setItem("username", username): 存储用户名。

   3. 过期时间信息：

      • localStorage.setItem("expiredTime", Date.now() + 5 * 60 * 1000): 存储令牌的过期时间，此处设置为当前时间加上5分钟。

   这样，通过将这些信息存储在 localStorage 中，可以在用户登录成功后方便地在浏览器中保留登录状态，以及在刷新页面或浏览器关闭后重新加载页面时恢复用户的登录状态。

总体来说，这个组件处理用户的登录操作，包括表单验证、发送登录请求、处理成功和失败的情况，并在相应的情况下显示提示消息。

登录成功页面效果如下图所示。

如果用户没有激活，则提示错误信息，页面效果如下图所示。

以上是实现登录页面的基本步骤。你可以根据自己的需求进行扩展和优化。

下一节，我们将解决Djoser模块的汉化问题。