Vue.js 如何在 JWT 令牌过期后注销用户

在本文中，我们将介绍如何在 Vue.js 应用中处理 JWT 令牌过期后自动注销用户的问题，并提供一些示例代码来帮助读者更好地理解。

阅读更多：Vue.js 教程

什么是 JWT

JWT（JSON Web Token）是一种开放标准（RFC 7519），定义了一种紧凑且自包含的方式，用于在各方之间安全地传输信息。它通常用于在客户端和服务器之间进行身份验证和授权。

一个 JWT 令牌由三部分组成：头部、负载和签名。头部包含了令牌的类型和算法，负载包含了相关信息，签名用于验证令牌的真实性。

JWT 令牌通常有一个预定义的过期时间（exp），一旦过期，需要获取新的令牌。然而，一些特殊的情况下，用户可能会在令牌过期之前关闭了浏览器或离开了站点，这时候我们需要在令牌过期后自动注销用户。

监听令牌过期

在 Vue.js 应用中，我们可以通过监听令牌过期事件来实现自动注销用户。可以利用 Vue.js 提供的生命周期钩子函数 created 来检查令牌的过期时间。

首先，我们需要在应用的主组件中添加一个用于存储令牌过期时间的变量：

data() {
  return {
    tokenExpiration: null
  };
}

然后，在 created 方法中，我们需要使用一个定时器来检查令牌是否已经过期：

created() {
  const token = localStorage.getItem("jwtToken");

  if (token) {
    const payload = parseJwt(token);
    this.tokenExpiration = payload.exp * 1000;

    setInterval(() => {
      const currentTime = new Date().getTime();
      if (currentTime > this.tokenExpiration) {
        this.logout();
      }
    }, 1000);
  }
}

在上面的代码中，我们首先从本地存储中获取 JWT 令牌，并使用 parseJwt 函数解析出令牌的过期时间。然后，我们通过定时器每秒钟检查一次当前时间是否超过了令牌过期时间，如果是，则调用 logout 方法来注销用户。

注销用户

一旦令牌过期，我们需要执行注销用户的操作。具体来说，我们需要清除存储在本地的令牌，并将用户重定向到登录页面。

首先，我们可以在主组件中添加一个注销用户的方法，并在该方法中执行清除令牌的操作：

methods: {
  logout() {
    localStorage.removeItem("jwtToken");
  }
}

然后，我们可以在 logout 方法中调用 Vue Router 提供的 push 方法来实现重定向到登录页面的功能：

methods: {
  logout() {
    localStorage.removeItem("jwtToken");
    this.$router.push("/login");
  }
}

在上面的代码中，我们使用 localStorage.removeItem 方法来清除本地存储的 JWT 令牌，并通过 $router.push 方法将用户重定向到登录页面。

示例代码

为了更好地说明上述概念，我们提供了一个简单的示例代码，展示了如何在 Vue.js 应用中处理 JWT 令牌过期后注销用户的功能。

<template>
  <div>
    <!-- 主要组件内容 -->
  </div>
</template>

<script>
import { parseJwt } from "@/utils";

export default {
  data() {
    return {
      tokenExpiration: null
    };
  },
  created() {
    const token = localStorage.getItem("jwtToken");

    if (token) {
      const payload = parseJwt(token);
      this.tokenExpiration = payload.exp * 1000;

      setInterval(() => {
        const currentTime = new Date().getTime();
        if (currentTime > this.tokenExpiration) {
          this.logout();
        }
      }, 1000);
    }
  },
  methods: {
    logout() {
      localStorage.removeItem("jwtToken");
      this.$router.push("/login");
    }
  }
};
</script>

上述示例代码中包含了一个主组件，其中插入了主要组件内容的占位符。在 created 方法中，我们执行了监测令牌过期的逻辑，并在 logout 方法中执行了用户注销的操作。