如何从flask api向vueJS提供授权头

Question

我正在处理一个使用JWT进行授权的登录页面。后端授权工作正常。但是，当我尝试使用axios从VueJS授权页面时，我得到一个错误，说缺少授权头。我想知道如何将访问令牌传递到前端。我的python代码是:

from flask import Flask,jsonify, render_template , url_for 
,redirect,session,request
from flask_sqlalchemy import SQLAlchemy
from flask_bcrypt import Bcrypt
from flask_cors import CORS
from flask_jwt_extended import create_access_token
from flask_jwt_extended import get_jwt_identity
from flask_jwt_extended import jwt_required
from flask_jwt_extended import JWTManager
app = Flask(__name__)
CORS(app, resources={r'/*': {'origins': '*'}})
# Setup the Flask-JWT-Extended extension
app.config["JWT_SECRET_KEY"] = "54x85xfcx1a*Yxae"  # Change 
this!
jwt = JWTManager(app)
db = SQLAlchemy(app)
bcrypt = Bcrypt(app)
@app.route('/')
@jwt_required()
def home():
current_user = get_jwt_identity()
return jsonify(logged_in_as=current_user), 200
@app.route('/login', methods=['POST'])
def login():
if request.method=='POST':
mail = request.form.get("mail")
password = request.form.get("password")
print(mail,password)
access_token = create_access_token(identity=mail)
return redirect('http://localhost:8080/')

@app.route('/register', methods=['POST'])
def register():
return redirect('http://localhost:8080/')
if __name__ == "__main__":
app.run(debug=True)

我的vue Router代码是:

import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'
import LoginView from '../views/LoginView.vue'
import RegisterView from '../views/RegisterView.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'home',
component: HomeView
},
{
path: '/login',
name: 'login',
component: LoginView
},
{
path: '/register',
name: 'register',
component: RegisterView
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router

我的家。vue是:

<template>
<h1>{{msg}}</h1>
</template>
<script>
import axios from 'axios';
export default {
name:'HomeView',
data() {
return {
msg : ''
}
},
methods: {
getResponse() {
const path = 'http://localhost:5000/';
axios.get(path)
.then((res) => {
console.log(res.data)
this.msg= res.data;
} )
.catch((err) => {
console.error(err);
})
}
},
created(){
this.getResponse();
}
}
</script>
<style>
</style>

Answer 1

首先，当用户登录时，您应该将令牌存储在前端代码的某个地方。通常访问令牌存储在本地存储中，代码如下:

localStorage.setItem('access_token', accessToken)

现在，您刚刚存储了访问令牌，以便您可以在网站的任何地方访问它。接下来，为了在将来的请求中发送令牌，您必须指定头在您的axios请求中，并发送令牌。因此，首先应该从本地存储获取令牌，然后发送适当的请求:

let access_token = localStorage.getItem('access_token')
axios.request.get(path, {
headers: {
'Authorization': access_token
}
})
.then(response => {
console.log(response.data)
})

我希望你会发现它有帮助!