实现1. 登录失效时显示弹窗提示，2.多窗口打开系统监听数据变化

1. 登录失效时显示弹窗提示，需要用户进入登录页重新登，在响应拦截器作处理

// 响应拦截器
service.interceptors.response.use(
  (response: AxiosResponse) => {
    const { code, message } = response.data;
    if (code === 2000) {
      return response.data;
    } else if (code === 4001) {
      ElMessage.error(message || "system error");
      return Promise.reject("Error");
    } else if (response.config.responseType == "blob") {
      // 响应数据为二进制流处理
      return response;
    } else if (code === 5001) {
        ElMessageBox.confirm(
          "The current page has expired, please log in again",
          "tips",
          {
            confirmButtonText: "sure",
            type: "warning",
          }
        ).then(() => {
          localStorage.clear();
          sessionStorage.clear();
          window.location.href = "/login";
        
    } else if (code === 7002) {
      return response.data;
    } else {
      // return Promise.reject(new Error(message || "Error"));
      ElMessage.error(message || "system error");
      return Promise.reject("Error");
    }
  },
  // 服务器状态码不是2开头的的情况
  // 这里可以跟你们的后台开发人员协商好统一的错误状态码
  // 然后根据返回的状态码进行一些操作，例如登录过期提示，错误提示等等
  // 下面列举几个常见的操作，其他需求可自行扩展
  (error: any) => {
    if (error.response.status) {
      switch (error.response.status) {
        // 401: 未登录
        // 未登录则跳转登录页面，并携带当前页面的路径
        // 在登录成功后返回当前页面，这一步需要在登录页操作。
        case 401:
          window.location.href = "/login";
          break;

        // 403 token过期
        // 登录过期对用户进行提示
        // 清除本地token和清空vuex中token对象
        // 跳转登录页面
        case 5001:
          // ElMessage({
          //   message: "Login expired, please login again",
          //   type: "warning",
          // });
          // 清除token
          localStorage.removeItem("userInfo");
          localStorage.removeItem("token");
          localStorage.removeItem("setMenuList");
          // 跳转登录页面，并将要浏览的页面fullPath传过去，登录成功后跳转需要访问的页面
          setTimeout(() => {
            window.location.href = "/login";
          }, 1000);
          break;
        // 404请求不存在
        case 404:
          ElMessage({
            message: "网络请求不存在",
            type: "warning",
          });
          break;
        // 其他错误，直接抛出错误提示
        default:
          ElMessage({
            message: error.response.data.message || error.response.statusText,
            type: "error",
          });
      }
      return Promise.reject(error.response);
    }
  }
);

3. 多窗口打开系统监听数据变化 浏览器窗口能监听(当点击审核跳转其他系统后，数据被审批完了，再次从浏览器窗口切换，请求接口 如：同时打开两个窗口，一个窗口登录A账户中，一个窗口退登录B账户，当返回到第一个窗口的时候会出现提示：当前的登录账户发生变化，获取到的数据需要刷新即可

在onMounted生命周期中调用visibilitychange进行窗口监听

// 浏览器窗口监听(当点击审核跳转其他系统后，数据被审批完了，再次从浏览器窗口切换，请求接口
const visibilitychange = () => {
  document.addEventListener("visibilitychange", function () {
    let lastUserId = sessionStorage.getItem("userId");
    let currentUserId = null;

    fetchList().then((res) => {  // 该接口是获取用户的信息
      if (res.code == 2000) {
        currentUserId = res.data.user.id;

        if (lastUserId != currentUserId) {
          ElMessageBox.alert(
            "The login status has changed and the page needs to be refreshed.",
            "Notification",
            {
              confirmButtonText: "OK",
              callback: (action: Action) => {
                location.reload();
              },
            }
          );
        }
      }
    });
  });
};