admin-axios-plus

介绍

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

安装

  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) : Promise
• postJSON(url: string, data?: any, config?: AxiosRequestConfig) : Promise
• putJSON(url: string, data?: any, config?: AxiosRequestConfig) : Promise
• deleteJSON(url: string, data?: any, config?: AxiosRequestConfig) : Promise
• uploadFile(url: string, file: any, params: object, onProgress?: (e: any) => void): Promise
• downloadFile(url: string, data?: any, method = "get"): Promise

本地存储（Cookies）

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

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

使用

main.ts

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

<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>