如何在Flask后端与Vue.js前端间传递Access Token？

一、后端（Flask）调整：新增 Token 分发接口 #

你的现有代码仅实现了Token验证逻辑，需要新增接口来处理用户登录并返回Access Token。以下是基于Auth0的实现方案：

1. 添加登录接口代码 #

在auth.py中新增以下代码：

import requests
from flask import request, jsonify

# 新增登录接口：对接Auth0获取Token后返回给前端
@app.route('/login', methods=['POST'])
def login():
    login_data = request.get_json()
    username = login_data.get('username')
    password = login_data.get('password')

    # 请求Auth0的Token生成端点
    auth0_token_url = f"https://{AUTH0_DOMAIN}/oauth/token"
    payload = {
        'grant_type': 'password',
        'username': username,
        'password': password,
        'audience': API_AUDIENCE,
        'client_id': '你的Auth0客户端ID',  # 替换为实际配置
        'client_secret': '你的Auth0客户端密钥'  # 替换为实际配置
    }

    try:
        response = requests.post(auth0_token_url, json=payload)
        return jsonify(response.json()), response.status_code
    except Exception as e:
        return jsonify({'error': str(e)}), 500

2. 后端配置注意事项 #

• 安装依赖库：pip install requests flask-cors
• 生产环境用环境变量存储敏感信息（如Auth0密钥），避免硬编码：

  import os
  client_id = os.getenv('AUTH0_CLIENT_ID')
  

• 开启CORS允许前端跨域请求：

  from flask_cors import CORS
  CORS(app)
  

二、前端（Vue.js）修改：动态获取并使用 Token #

修改ActorList组件，先通过登录接口获取Token，再携带Token请求数据接口：

<script>
import axios from 'axios';

export default {
  name: 'ActorList',
  props: {
    msg: String,
  },
  data() {
    return {
      actorList: '',
      accessToken: ''
    }
  },
  async mounted() {
    try {
      // 1. 调用后端登录接口获取Token（实际场景中从登录表单获取账号密码）
      const loginRes = await axios.post('http://127.0.0.1:5000/login', {
        username: '用户账号',
        password: '用户密码'
      });
      this.accessToken = loginRes.data.access_token;

      // 2. 携带Token请求数据接口
      const dataRes = await axios.get('http://127.0.0.1:5000/actor-list', {
        headers: {
          'Authorization': `Bearer ${this.accessToken}`
        }
      });
      this.actorList = dataRes.data.actor;
    } catch (error) {
      console.error("请求出错:", error);
    }
  }
}
</script>

前端优化建议 #

• 将Token存储在localStorage或Vuex中，避免页面刷新后重新登录：

  // 登录成功后存储
  localStorage.setItem('accessToken', loginRes.data.access_token);
  // 后续请求时读取
  const token = localStorage.getItem('accessToken');
  

• 添加Token过期处理：监听接口返回的401错误，自动跳转到登录页
• 单独拆分登录组件，不要在列表组件中耦合登录逻辑

三、安全要点 #

• 生产环境必须使用HTTPS传输，防止Token被窃听
• 前端禁止存储用户密码等敏感信息
• 后端验证Token的逻辑保持现有代码不变，确保接口的权限控制有效

内容的提问来源于stack exchange，提问作者Ota Yosuke