一个简单的登录注册界面流程介绍

登录页面实现
其他页面的实现可以到github上克隆下来
login_interface
login_server

一、用户登录

1、密码登录

流程：

1. 用户输入密码；
2. 表单使用正则验证用户名和密码格式；
3. 点击登录，对密码进行加密，并发送登录验证请求；
4. 后台验证用户登录信息是否正确；
5. 正确则生成token返回至前端，否则提示用户名或密码错误。

2、忘记密码

流程：

1. 输入手机号；
2. 表单正则验证手机号格式；
3. 点击获取验证码按钮；
4. 后台验证手机号是否存在；
5. 存在，则生成验证码，加密后保存在服务器session当中，否则提示手机号不存在；
6. 获取到验证码并输入；
7. 输入新密码；
8. 点击修改密码，验证码和新密码加密，发送修改密码请求；
9. 从服务器session里面取出验证码，进行手机号和验证码验证；
10. 正确，则修改密码，否则，提示手机号或验证码错误；
11. 修改成功，跳转至登录界面，否则，提示修改错误。

3、验证码登录

流程：

1. 输入手机号；
2. 表单验证手机号格式是否正确；
3. 正确则进行下一步，错误则提示手机号格式错误；
4. 点击获取验证码按钮；
5. 后台验证手机号是否存在；
6. 存在，则生成验证码，加密后保存在服务器session当中，否则提示手机号不存在；
7. 获取到验证码并输入；
8. 点击登录，对手机号和验证码进行格式验证，然后验证码加密，然后发送验证请求；
9. 从服务器session里面取出验证码进行验证；
10. 正确，则生成token返回至前端，否则，提示手机号或验证码错误。

二、用户注册

流程：

1. 输入注册信息；
2. 表单正则验证注册信息格式；
3. 点击注册，对密码进行加密，发送注册请求；
4. 注册前需要验证用户是否已经注册；
5. 注册成功，跳转至登录界面，否则，提示注册失败。

注册还涉及到对注册信息的脱敏，比如手机号，身份证号码等等这些信息的脱敏，但是这里我没有实现这个功能。

三、涉及技术

前端：react，antd，axios
后台：node.js，express
数据库：mysql

我这里介绍的只是登录注册的简单流程，真正复杂的登录注册里面还涉及到更多的知识。
如有问题，还请大家多多指教。