在多个浏览器窗口/选项卡中刷新一次JWT

Question

我设置了一些代码，可以成功刷新JWT令牌。当用户打开多个选项卡，并且它们都触发同时刷新令牌时，会出现问题。每个标签都获得了彼此不同的新令牌，只有最新的令牌才能实际使用。如何在所有浏览器选项卡上一次运行令牌刷新功能？

Answer 1

我知道了。首先想一想，您应该将令牌存储在本地存储中。然后，当您请求刷新令牌时，应首先在本地存储中设置带有令牌的Authorization标头，然后将其请求给服务器。这对于获取最新令牌是必需的。请求后，您将从服务器获得响应新令牌。将新令牌设置为本地存储，并使用新令牌设置Authorization标头（默认情况下）。这种方式对我有用。

  created() {
    const vm = this;
    axios.interceptors.response.use(
      function(response) {
        if (response.headers.authorization != undefined) {
          localStorage.setItem(
            "token",
            response.headers.authorization.replace("Bearer ", "")
          );
          axios.defaults.headers.common["Authorization"] =
            response.headers.authorization;
        }
        return response.data;
      },
      function(error) {
        if (error.response.status == 401) {
          vm.$store.dispatch("logout").then(() => {
            this.$router.push("/login").catch(err => {});
          });
        }
         return Promise.reject(error);
       }
    );
  },

  async mounted() {
      while (this.$store.getters.isLoggedIn) {
      await new Promise(resolve => setTimeout(resolve, 60000)).then(v => {
        axios.defaults.headers.common["Authorization"] =
          "Bearer " + localStorage.getItem("token");
        axios({ method: "get", url: "/login/refresh" });
      });
    }
 }