前后端配合实现密码找回功能

最近在开发一个密码找回的功能，目前已经实现，现在将实现的步骤记录下来。

前端-邮箱验证

用户进入忘记密码页面（localhost:8080/#/FindPwd），将用户名和图形验证码填入。前端对用户名进行后端校验（调用后端的api判断该用户名是否存在），如果用户不存在，给出相关提示；如果用户存在，然后调用发送邮件的后端api（携带用户名信息）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-y4umn6uc-1571106014160)(http://wbjiang.cn/%E6%89%BE%E5%9B%9E%E5%AF%86%E7%A0%81%E9%A1%B5%E9%9D%A2.png?imageMogr2/auto-orient/blur/1x0/quality/75|watermark/2/text/d2JqaWFuZy5jbg==/font/5qW35L2T/fontsize/640/fill/IzQ5NzZEQg==/dissolve/90/gravity/SouthWest/dx/10/dy/10)]

后端-发送邮件

1. 后端接收到前端发送邮件的请求后，通过用户名从数据库查找对应的邮箱，发送邮件（邮件的形式是一些介绍说明和一个前端链接，该链接的形式为
   localhost:8080/#/ResetPwd?token=yP1K8viNMKhv2HfDIPpS8exF21pPdVt8y9LP8AklXv78jPMImA4V7dJ5EMw1vJM7LcZ7BfDpXE1GHhdMga3r0A==)
   其中localhost:8080为前端的ip和端口，后端可以从http请求头中的Origin中获取，这里用localhost:8080作为示例。而token中携带了加密信息（其中可以包含用户信息，用来作为重置密码页面的提示内容；其中必须包含用户id，失效时间等关键信息）。

2. 发送邮件后，给前端响应，通知前端邮件是否发送成功。前端拿到这个结果，相应地给用户提示（如：“邮件发送成功，请前往邮箱查收”）

前端-解密链接

用户点击链接打开页面，前端对链接中的token查询字符串进行解密，调用后端解密的api，传入token值，解密可以得到用户id，失效时间等信息。前端获取到失效时间后，与当前时间做对比，如果已经过期，则提示用户；如果未过期，则展示重置密码页面。用户需要填入新密码，点击确认，进行密码重置。此时前端携带用户id和加密过的新密码发送重置密码的请求给后端api，后端返回成功后，前端提示用户修改成功。

以上就是前后端配合实现密码找回功能的主要步骤！