vue + flask实现邮件密码找回功能
时间:2022-07-23
本文章向大家介绍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
- 51Nod 1080 两个数的平方和(数论,经典题)
- Selenium3+python自动化50-环境搭建(firefox)
- Selenium2+python自动化51-unittest简介
- 开发者的如何优雅的使用OSX
- 1082 与7无关的数(思维题,巨坑)
- Facebook构建高性能Android视频组件实践之路
- Samba服务的配置总结
- 大型互联网系统的监控流水线
- 10-移动端开发教程-移动端事件
- 灰色理论预测模型
- tweet情感分析流程
- Selenium2+python自动化52-unittest执行顺序
- 基于TensorFlow实现自编码器(附源码)
- Selenium2+python自动化53-unittest批量执行(discover)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- CentOS6.5系统简单安装与配置Nginx服务器的方法
- 详解linux 摄像头驱动编写
- Ubuntu16.04搭建NFS 文件共享服务器的方法
- 详解linux pwm驱动编写
- Ubuntu 16.04 LTS系统里中文txt文件打开的问题解决
- linux nand flash驱动编写
- 在Linux中使用Vundle管理Vim插件的方法
- 详解linux添加硬盘分区挂载教程
- CentoS6.5环境下redis4.0.1(stable)安装和主从复制配置方法
- 详解linux dma驱动编写
- CentOS6.5环境安装nginx服务器及负载均衡配置操作详解
- 详解linux 驱动编写(sd卡驱动)
- Centos 6.9环境下创建用户及删除用户的方法
- 详解linux驱动编写(入门)
- Ubuntu使用国内源出现Hash Sum mismatch错误的解决