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;
headers?: Record<string, unknown>;
jumpLoginFn: () => void;
ElMessageFn: (msg: string) => void;
enableRefresh?: boolean;
refreshRequest?: ((opt: AxiosRequestConfig) => Promise<[token: string, expires: number]>);
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",
headers: { clientToken: "Basic YW5kcm9pZDphbmRyb2lk" },
jumpLoginFn: () => {
router.replace({ name: "login" });
},
ElMessageFn: (msg) => {
ElMessage.error(msg);
},
enableRefresh: true,
refreshRequest: async (cfg) => {
const res = await postJSON(apis.TokenRefresh, {}, cfg);
return [res.data.accessToken, res.data.expiresIn];
},
dictionaryRequest: async (codes) => {
const res = await getJSON(apis.DictionaryCode, { groupCodes: codes });
return res.data;
},
});
app.mount("#app");