Как проверить статус входа в систему Vue. js

Question

У меня есть приложение python flask в качестве backend API, а Vue. js SPA является внешним интерфейсом.

Когда я нажимаю кнопку входа во внешний интерфейс, он POST на мой flask логин api. Я также прикрепляю токен JWT к ответному куку ie.

from flask import Flask,request,jsonify,make_response
from flask_cors import CORS
from flask_jwt_extended import (
    JWTManager, jwt_required, create_access_token,
    get_jwt_claims,get_jwt_identity,set_access_cookies
)

@app.route('/login',methods=['POST'])
def login():
    username = request.json.get('username')
    password = request.json.get('password')

    if not(username=='toby5500' and password=='123456'):
        return jsonify({"msg":"404 error"})
    else:
        res = jsonify({"auth":"ok!"})
        #create JWT token 
        access_token = create_access_token(identity=username)
        #attach on response cookie 
        set_access_cookies(res,access_token) # has httponly flag!
        return res

Куку браузера ie после входа в систему:

So my question is when i want to go to other pages, what should i do for checking whether this user already login.

Now my idea is to call backend api to check whether this browser has correct JWT token before routing.

If flask api return error message(not have JWT token), redirect to the login page.

like this

router.beforeEach(async(to,from,next)=>{
    //this api will check jwt token 
    axios.get('/check_jwt').then((res)=>{
        if(res.data.error){
            next({path:'/login'})
        }
        else{
            next()//auth ok
        }
    })
})

Это правильный способ проверить логин?

Answer 1

Нет необходимости повторно проверять токен каждый раз, когда вы делаете запрос, просто проверьте дату истечения срока действия вашего токена и аккуратно обработайте ошибку 401 и обновление токена logi c. Например, в вашем перед каждым хуком, после извлечения токена из файлов cookie или vuex:

  let isExpired = true
  if (token) {
    isExpired = Date.now() > jwtDecode<{ exp: number }>(token).exp * 1000
  }
  // If no token or expired
  if (!token || isExpired) {
    // ..
  }

Answer 2

Другой вариант здесь быть реактивным. Вместо того, чтобы проверять, действителен ли токен перед отправкой запроса, просто сделайте свои запросы как обычно. Если вы когда-либо получите сообщение об ошибке, указывающее, что JWT истек (или недействителен по другим причинам, например, изменение секретного ключа на бэкэнде), тогда ваш интерфейс должен перенаправить обратно на страницу входа.