如何在Vue.js中检查登录状态

Question

我有一个python flask应用程序作为后端API，而Vue.js SPA是前端。

当我单击前端中的登录按钮时，它将 POST 到我的烧瓶登录API。 我还在响应cookie上附加了JWT令牌。

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

登录后的浏览器cookie：

所以我的问题是，当我想转到其他页面时，应如何检查该用户是否已经登录。

现在我的想法是调用后端api，以在路由之前检查此浏览器是否具有正确的JWT令牌。

如果flask api返回错误消息（不具有JWT令牌），请重定向到登录页面。

像这样

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错误和令牌刷新逻辑即可。例如，在从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已过期（或由于其他原因而无效，例如后端上的私钥更改），那么请让您的前端然后重定向回到登录页面。