admin-axios-plus

介绍

axios 扩展，登录拦截(后置)、请求封装、过期刷新 token、字典合并请求。

安装

  npm i axios admin-axios-plus --save

说明

• initAxios: 初始化，(options: AxiosConfig): void

• getJSON: GET 请求，(url: string, data?: any, config?: AxiosRequestConfig) : Promise

• postJSON：POST 请求，(url: string, data?: any, config?: AxiosRequestConfig) : Promise

• putJSON：PUT 请求，(url: string, data?: any, config?: AxiosRequestConfig) : Promise

• deleteJSON：DELETE 请求，(url: string, data?: any, config?: AxiosRequestConfig) : Promise

• postFile：文件上传，(url: string, evt: any, params: object = {}, onProgress?: (e: any) => void): Promise

• exportFlie：文件下载，(url: string, data: object, method = "get"): Promise

• getDictionary： 获取字典列表，(codes: string, cb: Function): void

• getDictionaryCodeName： 获取字典{code:name}列表，(codes: string, cb: Function): void

• getDictionaryCodeValue： 获取字典{code:value}列表，(codes: string, cb: Function): void

• getDictionaryValueName： 获取字典{value:name}列表，(codes: string, cb: Function): void

• dicValueName：获取字典 name，(groupCode: string, value: string, ref: any): void

export declare interface AxiosConfig {
  baseURL: string; // 基础URL
  headers?: Record<string, unknown>; // 请求头参数
  jumpLoginFn: () => void; // 鉴权失败跳转登录方法
  ElMessageFn: (msg: string) => void; // 错误信息提示方法
  enableRefresh?: boolean; // 是否开启token刷新
  refreshRequest?: ((opt: AxiosRequestConfig) => Promise<[token: string, expires: number]>);  // token刷新请求
  enableDictionary?: boolean; // 是否开启字典请求
  dictionaryRequest?: (codes: string) => Promise<object>; // 字典请求
}

使用

manin.ts

import { createApp } from "vue";
import App from "./App.vue";

import { axiosPlus } from "admin-axios-plus";
import { router } from "admin-router-plus";
import { ElMessage } from "element-plus";
import apis from "./utils/apis";

const app = createApp(App);

app.use(axiosPlus, {
  baseURL: "/api", // [必填]基础URL
  headers: { clientToken: "Basic YW5kcm9pZDphbmRyb2lk" }, // [可选]请求头追加参数
  jumpLoginFn: () => {
    router.replace({ name: "login" });
  },
  ElMessageFn: (msg) => {
    ElMessage.error(msg);
  },
  enableRefresh: true, // [可选]开启动态刷新token
  refreshRequest: async (cfg) => {
    const res = await postJSON(apis.TokenRefresh, {}, cfg);
    return [res.data.accessToken, res.data.expiresIn];
  }, // 刷新token请求
  dictionaryRequest: async (codes) => {
    const res = await getJSON(apis.DictionaryCode, { groupCodes: codes }); // 字典请求
    return res.data;
  },
});

app.mount("#app");