実現したいこと
JWTのトークンを使って/home (Protected ルート)にアクセスしたい
前提
Flaskでログイン機能を作っています。
Headersに "Authorization" : "Bearer <token>"という形で/homeというルートにアクセスするためのリクエストを送ると、トークンが承認され、一瞬だけアクセスすることができるのですが、すぐ"Token Missing" 401のエラーとともにキックアウトされてしまいます。
発生している問題・エラーメッセージ
"Token is missing!" (トークンが見当たりません)401ERROR
該当のソースコード
この関数がheadersからトークンを受け取り、チェックするものです。
Python
1def token_required(func): 2 @wraps(func) 3 def decorated(*args,**kwargs): 4 token = None 5 if 'Authorization' in request.headers: 6 token = request.headers['Authorization'].split(' ')[1] 7 print(token) 8 if not token: 9 return jsonify({'Alert!' : 'Token is missing!'}),401 10 try: 11 data = jwt.decode(token, app.config['SECRET_KEY'],algorithms=["HS256"]) 12 print(data) 13 except jwt.ExpiredSignatureError: 14 print("Expired!") 15 return jsonify({'message': 'Token has expired'}),401 16 except jwt.InvalidTokenError: 17 print('Invalid token') 18 return jsonify({'Alert!' : 'Invalid token!'}),401 19 return func(*args,**kwargs) 20 return decorated
バックエンド側のログインの関数
Python
1@app.route('/auth/login',methods=['GET','POST']) 2def loginUser(): 3 if request.method == 'POST': 4 data = request.get_json() 5 username = data['username'] 6 password = data['password'] 7 if not data or not username or not password: 8 return jsonify({'message': 'Missing required fields'}), 400 9 if check_username_exist(username) and checkPassword(get_userID(username),password): 10 token = jwt.encode({ 11 'user':username, 12 'exp': datetime.utcnow() + timedelta(hours=1)},app.config['SECRET_KEY'],algorithm='HS256') 13 return make_response(jsonify({'token': token}),200) 14 else: 15 return jsonify({'message': 'Password is incorrect'}),400 16 return jsonify({'message': 'Could not verify', 'WWW-Authenticate': 'Basic auth="Login required"'}), 401
フロントエンド側のログインの関数
python
1$(document).ready(function () { 2 $("form").on("submit", function (event) { 3 const userInfo = { 4 username: $("#username").val(), 5 password: $("#password").val(), 6 }; 7 $.ajax({ 8 type: "post", 9 url: "http://127.0.0.1:5000/auth/login", 10 dataType: "json", 11 contentType: "application/json", 12 data: JSON.stringify(userInfo), 13 success: function (result) { 14 const token = result.token 15 localStorage.setItem("token", token); 16 $.ajax({ 17 url: "http://127.0.0.1:5000/home", 18 type: "GET", 19 headers: { 20 "Authorization": "Bearer " + localStorage.getItem("token"), 21 "Content-Type": "application/json", 22 }, 23 success: function () { 24 window.location.href = "/home"; 25 }, 26 error: function (jqXHR, textStatus, errorThrown) { 27 console.log(errorThrown); 28 alert("Error: " + textStatus); 29 }, 30 }); 31 }, 32 error: function (xhr, status, error) { 33 console.log(xhr.responseText); 34 alert("Error: " + error); 35 }, 36 }); 37 event.preventDefault(); 38 }); 39 });
試したこと
OAuthLib の設定が必要という記事をみて試してみたのですがだめでした。
しっかりトークンが承認されているのも確認でき、しっかり200が帰ってくるのですが、その後401が帰ってきます。
Expireの時間も1時間に伸ばしてみましたが、だめでした。
ここ二日間この問題で詰まっています。誰かわかる方がいたら教えてほしいです。お願いします。

下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。
退会済みユーザー
2023/04/21 22:53
2023/04/21 23:57
退会済みユーザー
2023/04/22 00:20
2023/04/22 00:26
退会済みユーザー
2023/04/22 02:57 編集
2023/04/22 09:22
2023/04/22 13:15
退会済みユーザー
2023/04/23 01:01 編集