项目结构#

├── pages
├── static
└── stores
    └── counter.js
├── App.vue
├── main.js
├── manifest.json
├── pages.json
└── uni.scss

在 main.js 中编写以下代码：

// #ifdef VUE3
import { createSSRApp } from 'vue'
import * as Pinia from 'pinia';
import App from './App.vue'
export function createApp() {
  const app = createSSRApp(App)
  app.use(Pinia.createPinia());
  return {
    app,
	Pinia
  }
}
// #endif

在项目根中运行命令

npm init -y

HbuilderX运行内置终端

pinia-plugin-persistedstate#

pinia持久化插件安装

npm i pinia-plugin-persistedstate

安装#

npm i luch-request -S

请求封装#

baseUrl.js

const getBaseUrl = () => {
  let isDev = import.meta.env.MODE === "development";
  let baseUrlObj = {
    baseUrl: import.meta.env.VITE_BASE_URL,
  };
  if (isDev) {
    // baseUrlObj.baseUrl = "/apilocal";
    //本地切换线上
    // baseUrlObj.baseUrl = "/apiline";
  }
  // console.log("baseUrl", baseUrlObj);

  return baseUrlObj;
};
const baseUrl = getBaseUrl();
export default baseUrl;

config.js

import baseUrl from './baseUrl';
import mutual from '@/utils/util/mutual';
let header = {
    //   Authorization: authorize,
    'Content-Type': 'application/json; charset=UTF-8',
    // 'content-type': method === 'POST' ? 'application/json' : 'application/x-www-form-urlencoded', // 默认值,
};
export default {
    baseURL: baseUrl.baseUrl,
    header: header,
    method: 'GET',
    dataType: 'json',

    // #ifndef MP-ALIPAY
    responseType: 'text',
    // #endif

    // 注：如果局部custom与全局custom有同名属性，则后面的属性会覆盖前面的属性，相当于Object.assign(全局，局部)
    custom: { auth: false }, // 全局自定义参数默认值

    // #ifdef H5 || APP-PLUS || MP-ALIPAY || MP-WEIXIN
    timeout: 20000,
    // #endif

    // #ifdef APP-PLUS
    sslVerify: true,
    // #endif

    // #ifdef H5
    // 跨域请求时是否携带凭证（cookies）仅H5支持（HBuilderX 2.6.15+）
    withCredentials: false,
    // #endif

    // #ifdef APP-PLUS
    firstIpv4: false, // DNS解析时优先使用ipv4 仅 App-Android 支持 (HBuilderX 2.8.0+)
    // #endif

    // 全局自定义验证器。参数为statusCode 且必存在，不用判断空情况。
    validateStatus: (statusCode) => {
        if (statusCode == 400) mutual.showToast('参数错误');
        if (statusCode == 404) mutual.showToast('资源不存在');
        if (statusCode >= 500 && statusCode != 502) mutual.showToast('服务器错误');
        // statusCode 必存在。此处示例为全局默认配置
        return statusCode >= 200 && statusCode < 300;
    },
};

requestjs

import Request from "luch-request";
import config from "./config";
import baseUrl from "./baseUrl";
import { useUserStore } from "@/stores/modules/user";
import { authLogin } from "@/http/modules/user.js";
const http = new Request(config);
let isRefreshing = false;
let refreshSubscribers = []; // 存储等待请求的回调

/**
 * 当 refreshToken 刷新成功后，重新执行挂起的请求
 */
function onRefreshed(token) {
  refreshSubscribers.forEach((callback) => callback(token));
  refreshSubscribers = []; // 清空等待队列
}

/**
 * 订阅 Token 刷新
 */
function subscribeTokenRefresh(callback) {
  refreshSubscribers.push(callback);
}

/**
 * 刷新 Token
 */
let refreshlogin = async function (refreshToken) {
  isRefreshing = true;
  const userStore = useUserStore();
  let data = {
    account: undefined,
    pwd: null,
    password: "",
    captchaVerification: null,
    clientId: "PcK8xDtgS11smvem",
    refreshToken: userStore.refreshToken,
    secret: "LjGaldZe66wTxIcz5d1iz4zV1TPVQnuJ",
    tokenType: "refresh",
  };

  try {
    let res = await authLogin(data);
    if (res.status == 0) {
      userStore.updateAccessToken(res.data);
      onRefreshed(res.data.access_token);
      isRefreshing = false;
      return res.data.access_token;
    } else {
      throw new Error("登录状态过期");
    }
  } catch (error) {
    console.log("刷新 token 失败", error);
    isRefreshing = false;
    refreshSubscribers = [];
    uni.showToast({ title: "登录状态过期", icon: "none" });
    setTimeout(() => {
      if (process.env.UNI_PLATFORM === "h5") {
        window.location.href = "/pages/user/login";
      } else {
        uni.navigateTo({ url: "/pages/user/login" });
      }
    }, 1000);
    return false;
  }
};
/**
 * 在请求之前拦截
 */
http.interceptors.request.use(
  async (config) => {
    const {
      custom: { auth },
    } = config;

    let userStore = useUserStore();
    let accessToken = userStore.accessToken;
    let refreshToken = userStore.refreshToken;
    let expiresIn = userStore.expiresIn;
    let timeStamp = Math.floor(new Date().getTime() / 1000);

    //没有登录
    if (auth && !accessToken) {
      console.log("没有登录，去登录");

      if (process.env.UNI_PLATFORM === "h5") {
        window.location.href = "/pages/user/login";
      } else {
        uni.navigateTo({ url: "/pages/user/login" });
      }
      return Promise.reject("未登录");
    }

    // 如果 Token 过期
    if (auth && accessToken && timeStamp > expiresIn - 30) {
      if (!isRefreshing) {
        console.log("登录过期重新获取", refreshToken);
        await refreshlogin();
      }
      return new Promise((resolve) => {
        subscribeTokenRefresh((newToken) => {
          config.header = {
            ...config.header,
            Authorization: newToken,
          };
          console.log("刷新成功,带token继续请求");
          resolve(http.request(config));
        });
      });
    } else {
      config.header = {
        ...config.header,
        Authorization: accessToken,
      };
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

/**
 * 在请求之后拦截
 */
http.interceptors.response.use(
  (response) => {
    if (response.statusCode == 200) {
      return Promise.resolve(response.data);
    } else {
      return Promise.reject(response);
    }
  },
  (error) => {
    return Promise.reject(error);
  }
);
export default http;

api.js

/**
 * 接口统一集成模块
 */
const requireComponent = require.context('./modules', false, /\.js$/) 
const modules = {}
requireComponent.keys().forEach(key => {
  const moduleName = key.replace(/(.*\/)*([^.]+).*/gi, '$2')
  const value = requireComponent(key)
  // 兼容ts
  modules[moduleName] = value
})

// 默认全部导出
export default modules

modules/user.js

import http from "@/http/request";

/**
 * 用户登录
 * @returns {Promise | Promise<unknown>}
 */
export function authLogin(data = {}) {
  return http.post("/auth/oauth/noAuth/token", data, {
    custom: { auth: false },
  });
}

/**
 * 用户端直接上传到七牛，获取七牛的token
 * @returns {Promise | Promise<unknown>}
 */
export function fileUpToken() {
  return http.get("/match/file/getUpToken", {
    custom: { auth: false },
  });
}