vue + flask实现邮件密码找回功能
vue + flask实现邮件密码找回功能
跟大家聊聊前后端分离情况下的密码找回功能，针对vue+flask的实现在Google上搜索并没有一个很明确的文档，所以在此记录下自己的操作经历。
效果演示
1、判断是否未输入就提交
2、这里做了邮箱自动补全功能，密码手动输入邮箱后缀出错。
1、这里做了密码复杂度的判断
2、做了两次输入密码是否一致判断
密码找回的逻辑
环境
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
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2020-08-08，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录