vue.js - token 失效时自动注销用户

Question

我有一个基于 vuejs 构建的 SPA。当用户通过 API 登录时， token 存储在本地存储中。

我需要一个全局解决方案，它会在 token 不再有效时注销并提示用户。目前，我在访问私有(private) API 端点时收到“无效 token ”错误。

我如何设置 axios 以便所有无效 token 的响应都将触发注销/提示代码？

Answer 1

这是一个使用 axios 的简单示例。它使用 Bearer token 进行身份验证。

import axios from "axios";

import { useUserStore } from "@/store/userStore";

const apiClient = axios.create({
  baseURL: ""http://127.0.0.1:8001",
  headers: {},
});

apiClient.interceptors.response.use(
  (response) => response,
  async (error) => {
    const config = error?.config;

    if (error?.response?.status === 401) {
      const result = await refreshToken();

      if (result) {
        config.headers = {
        ...config.headers,
        authorization: `Bearer ${result?.token}`,
      };
    }
    return axios(config);
  }
);


const refreshToken = async () => {
  /* do stuff for refresh token */
 
  // if refresh token failed
  try {
    useUserStore().actionLogout();
  } catch (error) {
    console.log(error);
  } finally {
    loacalStorage.clear();
  }
};