检查 JWT 令牌的有效性 - beforeEnter答案

【问题标题】：Checking the validity of JWT Tokens - beforeEnter检查 JWT 令牌的有效性 - beforeEnter
【发布时间】：2020-10-21 21:11:46
【问题描述】：

我有一个在 Vue 路由器中运行 'beforeEnter' 的函数来验证用户是否已通过身份验证，否则会触发消息。

它会检查 (jwt) token 是否保存在 localStorage 中 - 如果用户手动注销，这会起作用，因为它会从 localStorage 中删除令牌。但是，当令牌过期时，它仍保留在 localStorage 中，因此函数认为 ((localStorage.token)) 用户已登录。

由于令牌无效，服务器仍会阻止任何请求 - 因此是安全的。

如何在页面加载之前在服务器端的“beforeEnter”中间件中检查令牌的有效性？

我是否需要创建一个端点来检查令牌的有效性并返回结果？（我正在使用 fetch()，但是我看到有人使用 axios 拦截器...）

我不使用 VUEX 毫无价值，而且似乎还有更多详细信息？

function protectedPage(to, from, next) {
  if (localStorage.token) {
    next();
  } else {
    Vue.toasted.show("The session has ended. Please login.", {
      theme: "toasted-primary",
      position: "top-center",
      duration: null,
      action: {
        text: "Login",
        onClick: (e, toastObject) => {
          next("/");
          toastObject.goAway(0);
        }
      }
    });
    next("/");
  }
}

【问题讨论】：

标签： vue.js vuejs2 vue-router

【解决方案1】：

由于exp 是有效负载的一部分，而 JWT 只是一个 base64 字符串，您只需对其进行解码并在您的 Vue 应用程序上检查 exp 时间。

这是一个解码 JWT 令牌并获取有效负载的函数（取自 here）

function parseJwt (token) {
    var base64Url = token.split('.')[1];
    var base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
    var jsonPayload = decodeURIComponent(Buffer.from(base64, "base64").toString("ascii").split("").map(function(c) {
        return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
    }).join(''));

    return JSON.parse(jsonPayload);
};

并在您的 beforeRouteEnter 函数中检查它：

beforeRouteEnter (to, from, next) {
  if (localStorage.token) {
    const jwtPayload = parseJwt(localStorage.token);
    if (jwtPayload.exp < Date.now()/1000) {
        // token expired
        deleteTokenFromLocalStorage();
        next("/");
    }
    next();
  } else {
    next("/");
  }
},

您实际上不需要在后端服务器上检查它，因为解码 JWT 令牌有效负载并在客户端检查它没有安全问题。此外，每次用户访问路由时，它都会为您节省一个 HTTP 请求。

【讨论】：

【解决方案2】：

您需要一个绑定到每个 API 调用的后端中间件，并验证用户会话是否仍然存在并且具有相同的令牌。

如果会话已过期或令牌已更改且与当前用户会话不匹配，您可以将用户从后端重定向到登录页面并强制他创建新会话。

我认为您不需要为每个路由入口获取身份验证，只需阻止后端 api 调用并返回消息或重定向到登录页面即可。用户仍然可以浏览具有过期会话信息的页面，但无法执行任何获取或表单操作。

【讨论】：