Vue+Flask实现简单的登录验证跳转

文件位置：输入图片说明

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <title>Login</title>
6
7    <script type="text/javascript" src="../static/vue.js"></script>
8    <script type="text/javascript" src="../static/axios.js"></script>
9
10</head>
11<body>
12
13<div id="login">
14    <form action="#" novalidate>
15        <label for="username">Username</label>
16        <input type="text" name="username" id="username" placeholder="Enter your Name" v-model="username"><br>
17        <label for="password">Password</label>
18        <input type="text" name="password" id="password" placeholder="Enter your Password" v-model="password"><br>
19        <br>
20
21        <button type="button" v-on:click="login">Apply</button>
22    </form>
23</div>
24
25
26<script type="text/javascript">
27    var login = new Vue({
28        el: '#login',
29        data:{
30            username: '',
31            password: ''
32        },
33        methods: {
34            login: function () {
35               axios.post('http://127.0.0.1:5000/login',{
36                   username: this.username,
37                   password: this.password
38               }).then(function (response) {
39                   console.log(response.status)
40                   // 其实是应该走后台路由
41                   if(parseInt(response.status) === 200){
42                       window.location.href = 'index'
43                   }
44               }).catch(function (error) {
45                   console.log(error.response)
46               })
47
48            }
49        }
50    })
51</script>
52
53</body>
54</html>
55

index.html

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <title>Index</title>
6</head>
7<body>
8    <h1>Hello,This is Index Page!</h1>
9</body>
10</html>
11

1# -*- coding: utf-8 -*-
2
3from flask import Flask, request, session, redirect, url_for, render_template, make_response, jsonify
4app = Flask(__name__)
5
6
7@app.route('/login', methods=('GET', 'POST'))
8def login():
9    if request.method == 'POST':
10        session['username'] = request.json.get('username')
11        session['password'] = request.json.get('password')
12        # 登录成功，则跳转到index页面
13        return jsonify({'code': 200, 'token': "123456"})
14    # 登录失败，跳转到当前登录页面
15    return render_template('login.html')
16
17
18@app.route('/index')
19def index():
20    # 如果用户名和密码都存在，则跳转到index页面，登录成功
21    if 'username' in session and 'password' in session:
22        return render_template('index.html')
23    # 否则，跳转到login页面
24    return redirect(url_for('login'))
25
26
27@app.route('/logout')
28def logout():
29    session.pop('username', None)
30    session.pop('password', None)
31    return redirect(url_for('login'))
32
33
34# set the secret key.  keep this really secret:
35app.secret_key = 'A0Zr98j/3yX R~XHH!jmN]LWX/,?RT'
36
37
38if __name__ == '__main__':
39    app.run(debug=True)

Vue+Flask实现简单的登录验证跳转

评论区

相关推荐