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源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。