admin-axios-plus

介绍

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

安装

  npm i admin-axios-plus --save

说明

备注：

1. 插件需在element-plus之后注册，依赖 element-plus(错误提示)。
2. 鉴权秘钥(获取cookie中的'token'值)携带在请求头的Authorization字段中。
3. 接口统一响应格式 { code: 0, msg: '操作成功' data: ... }，code用于状态判断。
4. 登录拦截：当响应code值在unauthorizedCode(未授权)配置数组中时，则跳转登录页面。
5. 过期刷新：当响应code值在refreshTokenCode(token已过期)中时，触发刷新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
• exportFlie(url: string, data?: any, method = "get"): Promise
• postFile(url: string, file: File, params?: object, onProgress?: (e: any) => void): Promise

字典请求

• getDictionary(codes: string, cb: Function): void
• getDictionaryCodeName(codes: string, cb: Function): void
• getDictionaryCodeValue(codes: string, cb: Function): void
• getDictionaryValueName(codes: string, cb: Function): void

存储管理

• getToken(): string | undefined
• setToken(token: string, expires?: number): undefined // 有效时长(秒)
• removeToken(): void
• getLoginUser(): any
• setLoginUser(loginUser: object): void
• removeLoginUser: void

export declare interface AxiosConfig {
  baseURL: string // 基础URL，默认 /api
  timeout?: number // 超时时间，默认 15000 毫秒(15秒)
  headers?: Record<string, unknown>; // [可选]请求头追加参数
  unauthorizedCode?: number[], // [可选]未授权状态码,默认[401]
  refreshTokenCode?: number[], // [可选]刷新鉴权状态码,默认[402]
  loginPath?: string // [可选]登录页路径,默认/login
  dictionaryApi?: string; // [可选]字典接口地址[get]
  refreshTokenApi?: string; // [可选]刷新token接口地址[post]
  refreshTokenResTokenKey?: string // [可选]接口响应的秘钥key,默认accessToken
  refreshTokenResExpiresKey?: string // [可选]接口响应有效时长key(秒)，默认expiresIn
}

使用

manin.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, {
  baseURL: '/api', // 基础URL
  unauthorizedCode: [401], // 未授登录状态码
  refreshTokenCode: [402], // 刷新Token状态码
  dictionaryApi: '/base/dictionary', // 字典接口
  refreshTokenApi: '/base/token/refresh', // 刷新Token接口
})

app.mount('#app')

字典接口响应格式

请求参数： { groupCodes: 'bas_user_state,language_type,...' }

{
  "code": 0,
  "msg": "success",
  "data": {
    "bas_user_state": [
      {
        "id": "489381103231526",
        "parentId": "0",
        "name": "未激活",
        "value": "0",
        "code": "user_not_active"
      },
      {
        "id": "489381103231527",
        "parentId": "0",
        "name": "激活",
        "value": "1",
        "code": "user_active"
      },
      {
        "id": "489381103231528",
        "parentId": "0",
        "name": "禁用",
        "value": "2",
        "value2": "",
        "value3": "",
        "code": "user_forbidden"
      }
    ],
    "language_type": [
      {
        "id": "467366309705273344",
        "parentId": "0",
        "name": "简体中文",
        "value": "CN",
        "code": "cn"
      },
      {
        "id": "467366309705273345",
        "parentId": "0",
        "name": "English",
        "value": "EN",
        "code": "en"
      },
      {
        "id": "740583268825804800",
        "parentId": "0",
        "name": "繁體中文",
        "value": "TW",
        "code": "tw"
      }
    ]
    ...
  }
}