# admin-axios-plus

**Repository Path**: lin779249475/admin-axios-plus

## Basic Information

- **Project Name**: admin-axios-plus
- **Description**: Axios封装库、功能扩展
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-09-11
- **Last Updated**: 2025-11-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue, JavaScript, npm

## README

# admin-axios-plus

### 介绍

axios 扩展，登录拦截【后置】、请求封装、过期刷新 Token。

### 安装

```bash
  npm i admin-axios-plus --save
```

### 说明

备注：

1.  鉴权秘钥(获取`getToken()`的值)携带在请求头的`Authorization`字段中。
2.  接口统一响应格式 `{ code: 0, msg: '' data: ... }`，code 用于状态判断。
3.  登录拦截：当响应 code 值在`unauthorizedStatusCodes`数组中时，触发未授权处理。
4.  过期刷新：当响应 code 值在`refreshTokenStatusCodes`数组中时，触发刷新 token 请求。

请求封装

- getJSON(url: string, data?: any, config?: AxiosRequestConfig<any>) : Promise<unknown>
- postJSON(url: string, data?: any, config?: AxiosRequestConfig<any>) : Promise<unknown>
- putJSON(url: string, data?: any, config?: AxiosRequestConfig<any>) : Promise<unknown>
- deleteJSON(url: string, data?: any, config?: AxiosRequestConfig<any>) : Promise<unknown>
- uploadFile(url: string, file: any, params: object, onProgress?: (e: any) => void): Promise<unknown>
- downloadFile(url: string, data?: any, method = "get"): Promise<unknown>

本地存储（Cookies）

- Cookies: Cookies对象
- getToken(key?: string): string | undefined
- setToken(token: string, expires?: number, key?: string): undefined // 有效时长(秒)
- removeToken(key?: string): void

```js
export declare interface AxiosConfig {
  axiosDefaults: Omit<AxiosDefaults, "headers">; // Axios默认配置
  unauthorizedStatusCodes?: number[]; // 未授权状态码
  refreshTokenStatusCodes?: number[]; // 刷新token状态码
  unauthorizedHandler: () => void; // 未授权处理函数
  refreshTokenRequest?: () => Promise<void>; // 刷新token请求函数
}
```

### 使用

main.ts

```js
import { createApp } from 'vue'
import { createPinia } from 'pinia'

import AxiosPlus from 'admin-axios-plus'

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

import router from './router'
import App from './App.vue'

import './assets/main.css'

const app = createApp(App)

app.use(createPinia())
app.use(router)

app.use(ElementPlus)

app.use(AxiosPlus, {
  axiosDefaults: {
    baseURL: "/api", // 基础URL
  },
  refreshTokenStatusCodes: [402],
  unauthorizedStatusCodes: [401],
  unauthorizedHandler: () => {
    removeToken();
    router.push("/login");
  },
  refreshTokenCallback: (res) => {
    // 请求刷新token后，写入新token
    setToken(res.data.data.token, res.data.data.expires);
  },
})

app.mount('#app')
```

example.vue

```vue
<template>
  <div class="example">
    <h1>This is an index page</h1>
  </div>
</template>

<script setup lang="ts">
import { getJSON, postJSON } from 'admin-axios-plus'

function onRequest() {
  getJSON('/tableColumn/list', { tableCode: 'user_role' }).then((res) => {
    console.log(res)
  })
}

function onLogin() {
  postJSON(
    '/login/pwd',
    {
      loginName: 'admin',
      loginPwd: 'admin123456',
    },
    { headers: { version: 2 } }
  ).then((res) => {
    console.log(res)
  })
}
</script>
```