Vue+Flask实现简单的登录验证跳转的示例代码

下面是“Vue+Flask实现简单的登录验证跳转的示例代码”的完整攻略，包含两个示例说明。

示例一

前端部分（Vue）

在前端部分，我们需要使用 axios 进行登录请求。登录成功后我们将会在 cookie 中存储 token，以便随后的访问都可以带上该 token。

<template>
  <form>
    <input v-model="username" type="text" placeholder="username" />
    <input v-model="password" type="password" placeholder="password" />
    <button @click.prevent="login">login</button>
  </form>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      username: '',
      password: '',
    };
  },
  methods: {
    async login() {
      const response = await axios.post('/api/login', {
        username: this.username,
        password: this.password,
      });
      if (response.data.success) {
        document.cookie = `token=${response.data.token}`;
        window.location.href = '/home';
      } else {
        alert(response.data.message);
      }
    },
  },
};
</script>

后端部分（Flask）

在后端部分，我们先实现一个简单的登录验证逻辑，在成功验证后会返回一个 token。

from flask import Flask, jsonify, request
import jwt

app = Flask(__name__)

@app.route('/api/login', methods=['POST'])
def login():
    username = request.form.get('username')
    password = request.form.get('password')
    if username == 'admin' and password == '123456':
        token = jwt.encode({'username': username}, 'secret', 'HS256')
        return jsonify({'success': True, 'token': token.decode('ascii')})
    else:
        return jsonify({'success': False, 'message': 'invalid credentials'})

接着我们需要在所有需要登录才能访问的 API 都进行 token 验证。在这个示例中我们假设 /api/home 即为需要登录才能访问的 API。

@app.route('/api/home')
def home():
    token = request.cookies.get('token')
    if not token:
        return jsonify({'success': False, 'message': 'missing token'}), 401
    try:
        jwt.decode(token, 'secret', algorithms=['HS256'])
    except jwt.exceptions.DecodeError:
        return jsonify({'success': False, 'message': 'invalid token'}), 401
    return jsonify({'success': True, 'message': 'welcome home'})

通过这样的代码实现，我们就可以实现基本的登录验证跳转了。

示例二

前端部分（Vue）

在前端部分，我们实现一个带有 token 的请求，通过验证 token 来决定是否允许请求 API。

<template>
  <form>
    <input v-model="username" type="text" placeholder="username" />
    <input v-model="password" type="password" placeholder="password" />
    <button @click.prevent="login">login</button>
    <button @click.prevent="showSecret">show secret</button>
  </form>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      username: '',
      password: '',
    };
  },
  methods: {
    async login() {
      const response = await axios.post('/api/login', {
        username: this.username,
        password: this.password,
      });
      if (response.data.success) {
        document.cookie = `token=${response.data.token}`;
        alert('login success');
      } else {
        alert(response.data.message);
      }
    },
    async showSecret() {
      const token = document.cookie.replace(/token=/, '');
      try {
        const response = await axios.get('/api/secret', {
          headers: {
            Authorization: `Bearer ${token}`,
          },
        });
        alert(response.data.message);
      } catch (error) {
        alert(error.response.data.message);
      }
    },
  },
};
</script>

后端部分（Flask）

在后端部分，我们实现前端所使用的 API。首先是登录验证逻辑，和示例一中的逻辑相同。

from flask import Flask, jsonify, request
import jwt

app = Flask(__name__)

@app.route('/api/login', methods=['POST'])
def login():
    username = request.form.get('username')
    password = request.form.get('password')
    if username == 'admin' and password == '123456':
        token = jwt.encode({'username': username}, 'secret', 'HS256')
        return jsonify({'success': True, 'token': token.decode('ascii')})
    else:
        return jsonify({'success': False, 'message': 'invalid credentials'})

接下来是需要登录才能访问的 API，通过验证 token 可以决定是否允许访问。

from flask import Flask, jsonify, request
import jwt

app = Flask(__name__)

@app.route('/api/secret')
def secret():
    token = request.headers.get('Authorization', '').replace('Bearer ', '')
    if not token:
        return jsonify({'success': False, 'message': 'missing token'}), 401
    try:
        jwt.decode(token, 'secret', algorithms=['HS256'])
    except jwt.exceptions.DecodeError:
        return jsonify({'success': False, 'message': 'invalid token'}), 401
    return jsonify({'success': True, 'message': 'you found the secret'})

通过这样的代码实现，我们同样可以实现基本的登录验证跳转。