vue结合php开发登录,使用Vue+Flask如何实现登录验证跳转（详细教程）

本篇文章主要介绍了Vue+Flask实现简单的登录验证跳转的示例代码，现在分享给大家，也给大家做个参考。

本文介绍了Vue+Flask实现简单的登录验证跳转，分享给大家，具体如下:

文件位置：

login.html

Login

Username

Password

Apply

var login = new Vue({

el: '#login',

data:{

username: '',

password: ''

},

methods: {

login: function () {

axios.post('http://127.0.0.1:5000/login',{

username: this.username,

password: this.password

}).then(function (response) {

console.log(response.status)

// 其实是应该走后台路由

if(parseInt(response.status) === 200){

window.location.href = 'index'

}

}).catch(function (error) {

console.log(error.response)

})

}

}

})

index.html

Index

Hello,This is Index Page!

Login.py# -*- coding: utf-8 -*-

from flask import Flask, request, session, redirect, url_for, render_template, make_response, jsonify

app = Flask(__name__)

@app.route('/login', methods=('GET', 'POST'))

def login():

if request.method == 'POST':

session['username'] = request.json.get('username')

session['password'] = request.json.get('password')

# 登录成功，则跳转到index页面

return jsonify({'code': 200, 'token': "123456"})

# 登录失败，跳转到当前登录页面

return render_template('login.html')

@app.route('/index')

def index():

# 如果用户名和密码都存在，则跳转到index页面，登录成功

if 'username' in session and 'password' in session:

return render_template('index.html')

# 否则，跳转到login页面

return redirect(url_for('login'))

@app.route('/logout')

def logout():

session.pop('username', None)

session.pop('password', None)

return redirect(url_for('login'))

# set the secret key. keep this really secret:

app.secret_key = 'A0Zr98j/3yX R~XHH!jmN]LWX/,?RT'

if __name__ == '__main__':

app.run(debug=True)

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：