vue + flask实现邮件密码找回功能

vue + flask实现邮件密码找回功能

跟你们聊聊先后端分离状况下的密码找回功能，针对vue+flask的实如今Google上搜索并无一个很明确的文档，因此在此记录下本身的操做经历。

效果演示

一、判断是否未输入就提交

二、这里作了邮箱自动补全功能，密码手动输入邮箱后缀出错。

一、这里作了密码复杂度的判断

二、作了两次输入密码是否一致判断

密码找回的逻辑

环境

flask

•flask•flask-mail•flask-cors•flask_sqlalchemy•pyjwt

vue

•vue•vue-router•vue-axios•element-ui

核心代码

生成token和验证token

class User(db.Model): __tablename__ = 'users' ... confirmed = db.Column(db.Boolean, default=False)

 def generate_confirmation_token(self, expireation=3600): """生成token, 过时时间为1个小时 """ s = Serializer(app.config['SECRET_KEY'], expireation) return s.dumps({'confirm': self.id}).decode('utf-8') @staticmethod def confirm(token): """验证Token """ s = Serializer(app.config['SECRET_KEY']) try: data = s.loads(token.encode('utf-8')) except SignatureExpired: return False except BadSignature: return False user = User.query.get(data.get('confirm')) if user is None: return False return True

发送邮件

@app.route("/reset/password", methods=["POST"])def reset_password(): """发送邮件 """ email = request.get_json().get('email') user = User.query.filter(User.email == email).first() token = user.generate_confirmation_token() msg = Message("重置密码", sender='noreply@zhuima.xxx', recipients=[user.email]) confirm_url = "http://localhost:8080/#/reset-password/{}".format(token) msg.body = '''点击下面连接重置密码, {} '''.format(confirm_url) mail.send(msg) return jsonify({"meta": "success"}), 200

注意事项

邮件投递找回密码url的问题

因为是先后端分离，邮件投递的时候的url拼接必定要特别注意，这里的所谓注意不仅仅局限于url自己，因为vue-router的路由守卫问题，咱们会把非认证的用户访问通通指向到/login页面，因此须要路由守卫的白名单。这个困扰了我很久很久

邮件投递找回密码url中token过时时间断定

因为该url只是在前端展示，因此打开URL的时候须要把params拎出来请求后端进行token校验工做，避免用户拿着过时的token来作一些事情。

如何选择

看上面的演示和上面的代码，咱们看到不少校验都是在前端作的，后端并无作很严格的校验工做，flask能够搭配flask_marshmallow实现校验工做， 后面会继续完善～，欢迎你们留言交流

欢迎关注个人公众号“追马Linux”，原创技术文章第一时间推送。

引用连接

[1] 密码找回逻辑图片: https://dev.to/paurakhsharma/flask-rest-api-part-5-password-reset-2f2e

本文分享自微信公众号 - 追马Linux（zhuima_k8s）。
若有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一块儿分享。