基于token的用户登录页面简易开发

写在文章之前：本文项目是小码哥李明杰老师的指导下开发完成的山东大学引航计划公益人工智能科研实训项目，本文完整代码已经上传到github：GitHub - LIKEileen/-

目录

一、开发环境准备

二、业务逻辑

三、前端开发

1. 表单布局

2. 信息交互

四、服务器开发

1. 登录服务

2. 拓展：用户登出

---

一、开发环境准备

前端： Webstorm2022.2        Umi框架        antd组件库        axios库

服务器： Pycharm商业版2022.2        Flask框架

ps:Pycharm只有商业版可以进行服务器开发与前端的联调，社区版并无此功能

二、业务逻辑

         诸如QQ登录，当今所有企业应用都离不开登录界面，只有在用户输入正确的用户名（或账号）以及相应的密码时，才能转入应用的页面进行交互，简易的登录逻辑如下：

1. 用户在前端应用中输入用户名和密码，并将其发送给服务器。在此期间可以进行简单的前端验证，以免明显错误的信息占用服务器资源去判断，例如：用户名或者密码不能为空

2. 服务器在收到由前端网页发送的信息后进行解构，并且判断用户名和密码是否有效（在企业业务中通查通过查询数据库实现，本文仅以特定账号和密码为例），如果输入的信息均正确，则向前端网页返回验证成功的信息，并生成token码发送，以便后续应用操作中对前端发来的请求进行安全认证，保障操作的安全性和可靠性；如果输入的信息有误，则返回错误信息，方便用户检查操作进行重新登录。

3. 前端网页接收服务器反馈的验证信息，并将其展示给用户，若验证成功则存储服务器发来的token进入应用的主页面，在进行应用操作时只需将token和相应的请求发送给服务器即可；若验证失败，则解析错误信息并渲染在网页上反馈给用户。

三、前端开发

1. 表单布局

        类似用户名、密码等输入信息在前端中一般是通过表单实现的，本文采用antd库中的Button，Form和Input实现简单的用户输入信息界面。

<Form.Item
    label = "用户名"
    name = "username"
    rules = {[{required: true, mess