xiaoxian521
3 years ago
40 changed files with 671 additions and 667 deletions
-
14.env
-
20.env.development
-
7.env.production
-
6.eslintrc.js
-
4README.en-US.md
-
4README.md
-
25build/index.ts
-
19build/proxy.ts
-
4package.json
-
89pnpm-lock.yaml
-
4src/api/routes.ts
-
26src/api/user.ts
-
BINsrc/assets/avatars.jpg
-
8src/config/index.ts
-
2src/layout/components/appMain.vue
-
17src/layout/components/navbar.vue
-
2src/layout/components/sidebar/breadCrumb.vue
-
13src/layout/components/sidebar/horizontal.vue
-
2src/layout/components/sidebar/sidebarItem.vue
-
3src/layout/components/tag/index.vue
-
24src/plugins/i18n/index.ts
-
32src/router/index.ts
-
16src/store/modules/app.ts
-
15src/store/modules/multiTags.ts
-
9src/store/modules/settings.ts
-
29src/store/modules/types.ts
-
84src/store/modules/user.ts
-
43src/utils/auth.ts
-
25src/utils/http/README.md
-
32src/utils/http/config.ts
-
236src/utils/http/core.ts
-
168src/utils/http/index.ts
-
45src/utils/http/types.d.ts
-
29src/utils/http/utils.ts
-
19src/utils/i18n.ts
-
53src/utils/storage/cookie.ts
-
93src/utils/storage/db.ts
-
16types/global.d.ts
-
55vite.config.ts
@ -1,14 +1,2 @@ |
|||
# port |
|||
# 项目本地运行端口号 |
|||
VITE_PORT = 8848 |
|||
# title |
|||
VITE_TITLE = vue-pure-admin |
|||
# version |
|||
VITE_VERSION = 2.6.0 |
|||
# open |
|||
VITE_OPEN = false |
|||
|
|||
# public path |
|||
VITE_PUBLIC_PATH = / |
|||
|
|||
# Cross-domain proxy, you can configure multiple |
|||
VITE_PROXY = [ ["/api", "http://127.0.0.1:3000" ] ] |
|||
@ -1,14 +1,12 @@ |
|||
# port |
|||
# 项目本地运行端口号 |
|||
VITE_PORT = 8848 |
|||
# title |
|||
VITE_TITLE = vue-pure-admin |
|||
# version |
|||
VITE_VERSION = 2.6.0 |
|||
# open |
|||
VITE_OPEN = false |
|||
|
|||
# public path |
|||
|
|||
# 开发环境读取配置文件路径 |
|||
VITE_PUBLIC_PATH = / |
|||
|
|||
# Cross-domain proxy, you can configure multiple |
|||
VITE_PROXY = [ ["/api", "http://127.0.0.1:3000" ] ] |
|||
# 开发环境代理 |
|||
VITE_PROXY_DOMAIN = /api |
|||
|
|||
# 开发环境后端地址 |
|||
VITE_PROXY_DOMAIN_REAL = "http://127.0.0.1:3000" |
|||
|
|||
@ -1,2 +1,5 @@ |
|||
# public path |
|||
VITE_PUBLIC_PATH = /manages/ |
|||
# 线上环境项目打包路径 |
|||
VITE_PUBLIC_PATH = / |
|||
|
|||
# 线上环境后端地址 |
|||
VITE_PROXY_DOMAIN_REAL = "" |
|||
@ -1,19 +0,0 @@ |
|||
type ProxyItem = [string, string]; |
|||
|
|||
type ProxyList = ProxyItem[]; |
|||
|
|||
const regExps = (value: string, reg: string): string => { |
|||
return value.replace(new RegExp(reg, "g"), ""); |
|||
}; |
|||
|
|||
export function createProxy(list: ProxyList = []) { |
|||
const ret: any = {}; |
|||
for (const [prefix, target] of list) { |
|||
ret[prefix] = { |
|||
target: target, |
|||
changeOrigin: true, |
|||
rewrite: (path: string) => regExps(path, prefix) |
|||
}; |
|||
} |
|||
return ret; |
|||
} |
|||
@ -8,9 +8,11 @@ specifiers: |
|||
"@fortawesome/free-solid-svg-icons": ^5.15.4 |
|||
"@fortawesome/vue-fontawesome": ^3.0.0-5 |
|||
"@types/element-resize-detector": 1.1.3 |
|||
"@types/js-cookie": ^3.0.1 |
|||
"@types/mockjs": 1.0.3 |
|||
"@types/node": 14.14.14 |
|||
"@types/nprogress": 0.2.0 |
|||
"@types/qs": ^6.9.7 |
|||
"@typescript-eslint/eslint-plugin": 4.31.0 |
|||
"@typescript-eslint/parser": 4.31.0 |
|||
"@vitejs/plugin-vue": ^1.9.4 |
|||
@ -36,6 +38,7 @@ specifiers: |
|||
eslint-plugin-vue: 7.17.0 |
|||
font-awesome: ^4.7.0 |
|||
husky: 7.0.2 |
|||
js-cookie: ^3.0.1 |
|||
lint-staged: 11.1.2 |
|||
lodash-es: ^4.17.21 |
|||
lowdb: ^3.0.0 |
|||
@ -49,6 +52,7 @@ specifiers: |
|||
postcss-import: 14.0.0 |
|||
prettier: 2.3.2 |
|||
pretty-quick: 3.1.1 |
|||
qs: ^6.10.2 |
|||
remixicon: ^2.5.0 |
|||
resize-observer-polyfill: ^1.5.1 |
|||
responsive-storage: ^1.0.11 |
|||
@ -86,6 +90,7 @@ dependencies: |
|||
element-plus: 1.2.0-[email protected] |
|||
element-resize-detector: 1.2.3 |
|||
font-awesome: 4.7.0 |
|||
js-cookie: 3.0.1 |
|||
lodash-es: 4.17.21 |
|||
lowdb: 3.0.0 |
|||
mitt: 3.0.0 |
|||
@ -94,6 +99,7 @@ dependencies: |
|||
path: 0.12.7 |
|||
path-to-regexp: 6.2.0 |
|||
pinia: 2.0[email protected][email protected] |
|||
qs: 6.10.2 |
|||
remixicon: 2.5.0 |
|||
resize-observer-polyfill: 1.5.1 |
|||
responsive-storage: 1.0[email protected] |
|||
@ -107,9 +113,11 @@ devDependencies: |
|||
"@commitlint/cli": 13.1.0 |
|||
"@commitlint/config-conventional": 13.1.0 |
|||
"@types/element-resize-detector": 1.1.3 |
|||
"@types/js-cookie": 3.0.1 |
|||
"@types/mockjs": 1.0.3 |
|||
"@types/node": 14.14.14 |
|||
"@types/nprogress": 0.2.0 |
|||
"@types/qs": 6.9.7 |
|||
"@typescript-eslint/eslint-plugin": 4.31.0_f4e6dc0776b3600ef484e3c64a523136 |
|||
"@typescript-eslint/parser": 4.31[email protected][email protected] |
|||
"@vitejs/plugin-vue": 1.9[email protected] |
|||
@ -1017,6 +1025,13 @@ packages: |
|||
} |
|||
dev: true |
|||
|
|||
/@types/js-cookie/3.0.1: |
|||
resolution: |
|||
{ |
|||
integrity: sha512-7wg/8gfHltklehP+oyJnZrz9XBuX5ZPP4zB6UsI84utdlkRYLnOm2HfpLXazTwZA+fpGn0ir8tGNgVnMEleBGQ== |
|||
} |
|||
dev: true |
|||
|
|||
/@types/json-schema/7.0.9: |
|||
resolution: |
|||
{ |
|||
@ -1089,6 +1104,13 @@ packages: |
|||
} |
|||
dev: true |
|||
|
|||
/@types/qs/6.9.7: |
|||
resolution: |
|||
{ |
|||
integrity: sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw== |
|||
} |
|||
dev: true |
|||
|
|||
/@types/resolve/1.17.1: |
|||
resolution: |
|||
{ |
|||
@ -1870,6 +1892,16 @@ packages: |
|||
engines: { node: ">=6" } |
|||
dev: true |
|||
|
|||
/call-bind/1.0.2: |
|||
resolution: |
|||
{ |
|||
integrity: sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA== |
|||
} |
|||
dependencies: |
|||
function-bind: 1.1.1 |
|||
get-intrinsic: 1.1.1 |
|||
dev: false |
|||
|
|||
/callsites/3.1.0: |
|||
resolution: |
|||
{ |
|||
@ -3379,7 +3411,6 @@ packages: |
|||
{ |
|||
integrity: sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A== |
|||
} |
|||
dev: true |
|||
|
|||
/functional-red-black-tree/1.0.1: |
|||
resolution: { integrity: sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc= } |
|||
@ -3401,6 +3432,17 @@ packages: |
|||
engines: { node: 6.* || 8.* || >= 10.* } |
|||
dev: true |
|||
|
|||
/get-intrinsic/1.1.1: |
|||
resolution: |
|||
{ |
|||
integrity: sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q== |
|||
} |
|||
dependencies: |
|||
function-bind: 1.1.1 |
|||
has: 1.0.3 |
|||
has-symbols: 1.0.2 |
|||
dev: false |
|||
|
|||
/get-own-enumerable-property-symbols/3.0.2: |
|||
resolution: |
|||
{ |
|||
@ -3586,6 +3628,14 @@ packages: |
|||
engines: { node: ">=8" } |
|||
dev: true |
|||
|
|||
/has-symbols/1.0.2: |
|||
resolution: |
|||
{ |
|||
integrity: sha512-chXa79rL/UC2KlX17jo3vRGz0azaWEx5tGqZg5pO3NUyEJVB17dMruQlzCCOfUvElghKcm5194+BCRvi2Rv/Gw== |
|||
} |
|||
engines: { node: ">= 0.4" } |
|||
dev: false |
|||
|
|||
/has/1.0.3: |
|||
resolution: |
|||
{ |
|||
@ -3594,7 +3644,6 @@ packages: |
|||
engines: { node: ">= 0.4.0" } |
|||
dependencies: |
|||
function-bind: 1.1.1 |
|||
dev: true |
|||
|
|||
/hash-sum/2.0.0: |
|||
resolution: |
|||
@ -3932,6 +3981,14 @@ packages: |
|||
resolution: { integrity: sha1-6PvzdNxVb/iUehDcsFctYz8s+hA= } |
|||
dev: true |
|||
|
|||
/js-cookie/3.0.1: |
|||
resolution: |
|||
{ |
|||
integrity: sha512-+0rgsUXZu4ncpPxRL+lNEptWMOWl9etvPHc/koSRp6MPwpRYAhmk0dUG00J4bxVV3r9uUzfo24wW0knS07SKSw== |
|||
} |
|||
engines: { node: ">=12" } |
|||
dev: false |
|||
|
|||
/js-tokens/4.0.0: |
|||
resolution: |
|||
{ |
|||
@ -4576,6 +4633,13 @@ packages: |
|||
resolution: { integrity: sha1-b2gragJ6Tp3fpFZM0lidHU5mnt4= } |
|||
dev: true |
|||
|
|||
/object-inspect/1.11.1: |
|||
resolution: |
|||
{ |
|||
integrity: sha512-If7BjFlpkzzBeV1cqgT3OSWT3azyoxDGajR+iGnFBfVV2EWyDyWaZZW2ERDjUaY2QM8i5jI3Sj7mhsM4DDAqWA== |
|||
} |
|||
dev: false |
|||
|
|||
/on-finished/2.3.0: |
|||
resolution: { integrity: sha1-IPEzZIGwg811M3mSoWlxqi2QaUc= } |
|||
engines: { node: ">= 0.8" } |
|||
@ -5103,6 +5167,16 @@ packages: |
|||
engines: { node: ">=0.6.0", teleport: ">=0.2.0" } |
|||
dev: true |
|||
|
|||
/qs/6.10.2: |
|||
resolution: |
|||
{ |
|||
integrity: sha512-mSIdjzqznWgfd4pMii7sHtaYF8rx8861hBO80SraY5GT0XQibWZWJSid0avzHGkDIZLImux2S5mXO0Hfct2QCw== |
|||
} |
|||
engines: { node: ">=0.6" } |
|||
dependencies: |
|||
side-channel: 1.0.4 |
|||
dev: false |
|||
|
|||
/queue-microtask/1.2.3: |
|||
resolution: |
|||
{ |
|||
@ -5469,6 +5543,17 @@ packages: |
|||
engines: { node: ">=8" } |
|||
dev: true |
|||
|
|||
/side-channel/1.0.4: |
|||
resolution: |
|||
{ |
|||
integrity: sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw== |
|||
} |
|||
dependencies: |
|||
call-bind: 1.0.2 |
|||
get-intrinsic: 1.1.1 |
|||
object-inspect: 1.11.1 |
|||
dev: false |
|||
|
|||
/signal-exit/3.0.5: |
|||
resolution: |
|||
{ |
|||
|
|||
@ -1,5 +1,5 @@ |
|||
import { http } from "../utils/http"; |
|||
|
|||
export const getAsyncRoutes = (data?: object) => { |
|||
return http.request("get", "/getAsyncRoutes", data); |
|||
export const getAsyncRoutes = (params?: object) => { |
|||
return http.request("get", "/getAsyncRoutes", { params }); |
|||
}; |
|||
@ -0,0 +1,26 @@ |
|||
import { http } from "../utils/http"; |
|||
|
|||
interface userType extends Promise<any> { |
|||
svg?: string; |
|||
code?: number; |
|||
info?: object; |
|||
} |
|||
|
|||
// 获取验证码
|
|||
export const getVerify = (): userType => { |
|||
return http.request("get", "/captcha"); |
|||
}; |
|||
|
|||
// 登录
|
|||
export const getLogin = (data: object) => { |
|||
return http.request("post", "/login", { data }); |
|||
}; |
|||
|
|||
// 刷新token
|
|||
export const refreshToken = (data: object) => { |
|||
return http.request("post", "/refreshToken", { data }); |
|||
}; |
|||
|
|||
// export const searchVague = (data: object) => {
|
|||
// return http.request("post", "/searchVague", { data });
|
|||
// };
|
|||
|
After Width: 400 | Height: 400 | Size: 23 KiB |
@ -0,0 +1,84 @@ |
|||
import { defineStore } from "pinia"; |
|||
import { store } from "/@/store"; |
|||
import { userType } from "./types"; |
|||
import { useRouter } from "vue-router"; |
|||
import { getLogin, refreshToken } from "/@/api/user"; |
|||
import { storageLocal, storageSession } from "/@/utils/storage"; |
|||
import { getToken, setToken, removeToken } from "/@/utils/auth"; |
|||
import { useMultiTagsStoreHook } from "/@/store/modules/multiTags"; |
|||
|
|||
const data = getToken(); |
|||
let token = ""; |
|||
let name = ""; |
|||
if (data) { |
|||
const dataJson = JSON.parse(data); |
|||
if (dataJson) { |
|||
token = dataJson?.accessToken; |
|||
name = dataJson?.name ?? "admin"; |
|||
} |
|||
} |
|||
|
|||
export const useUserStore = defineStore({ |
|||
id: "pure-user", |
|||
state: (): userType => ({ |
|||
token, |
|||
name |
|||
}), |
|||
actions: { |
|||
SET_TOKEN(token) { |
|||
this.token = token; |
|||
}, |
|||
SET_NAME(name) { |
|||
this.name = name; |
|||
}, |
|||
// 登入
|
|||
async loginByUsername(data) { |
|||
return new Promise<void>((resolve, reject) => { |
|||
getLogin(data) |
|||
.then(data => { |
|||
if (data) { |
|||
setToken(data); |
|||
resolve(); |
|||
} |
|||
}) |
|||
.catch(error => { |
|||
reject(error); |
|||
}); |
|||
}); |
|||
}, |
|||
// 登出 清空缓存
|
|||
logOut() { |
|||
this.token = ""; |
|||
this.name = ""; |
|||
removeToken(); |
|||
storageLocal.clear(); |
|||
storageSession.clear(); |
|||
useMultiTagsStoreHook().handleTags("equal", [ |
|||
{ |
|||
path: "/welcome", |
|||
parentPath: "/", |
|||
meta: { |
|||
title: "message.hshome", |
|||
icon: "el-icon-s-home", |
|||
i18n: true, |
|||
showLink: true |
|||
} |
|||
} |
|||
]); |
|||
useRouter().push("/login"); |
|||
}, |
|||
// 刷新token
|
|||
async refreshToken(data) { |
|||
return refreshToken(data).then(data => { |
|||
if (data) { |
|||
setToken(data); |
|||
return data; |
|||
} |
|||
}); |
|||
} |
|||
} |
|||
}); |
|||
|
|||
export function useUserStoreHook() { |
|||
return useUserStore(store); |
|||
} |
|||
@ -0,0 +1,43 @@ |
|||
import Cookies from "js-cookie"; |
|||
import { useUserStoreHook } from "/@/store/modules/user"; |
|||
|
|||
const TokenKey = "authorized-token"; |
|||
|
|||
type paramsMapType = { |
|||
name: string; |
|||
expires: number; |
|||
accessToken: string; |
|||
}; |
|||
|
|||
// 获取token
|
|||
export function getToken() { |
|||
// 此处与TokenKey相同，此写法解决初始化时Cookies中不存在TokenKey报错
|
|||
return Cookies.get("authorized-token"); |
|||
} |
|||
|
|||
// 设置token以及过期时间（cookies、sessionStorage各一份）
|
|||
// 后端需要将用户信息和token以及过期时间都返回给前端，过期时间主要用于刷新token
|
|||
export function setToken(data) { |
|||
const { accessToken, expires, name } = data; |
|||
// 提取关键信息进行存储
|
|||
const paramsMap: paramsMapType = { |
|||
name, |
|||
expires: Date.now() + parseInt(expires), |
|||
accessToken |
|||
}; |
|||
const dataString = JSON.stringify(paramsMap); |
|||
useUserStoreHook().SET_TOKEN(accessToken); |
|||
useUserStoreHook().SET_NAME(name); |
|||
expires > 0 |
|||
? Cookies.set(TokenKey, dataString, { |
|||
expires: expires / 86400000 |
|||
}) |
|||
: Cookies.set(TokenKey, dataString); |
|||
sessionStorage.setItem(TokenKey, dataString); |
|||
} |
|||
|
|||
// 删除token
|
|||
export function removeToken() { |
|||
Cookies.remove(TokenKey); |
|||
sessionStorage.removeItem(TokenKey); |
|||
} |
|||
@ -0,0 +1,25 @@ |
|||
## 用法 |
|||
|
|||
### Get 请求 |
|||
|
|||
``` |
|||
import { http } from "/@/utils/http"; |
|||
|
|||
// params传参 |
|||
http.request('get', '/xxx', { params: param }); |
|||
|
|||
// url拼接传参 |
|||
http.request('get', '/xxx?message=' + msg); |
|||
``` |
|||
|
|||
### Post 请求 |
|||
|
|||
``` |
|||
import { http } from "/@/utils/http"; |
|||
|
|||
// params传参 |
|||
http.request('get', '/xxx', { params: param }); |
|||
|
|||
// data传参 |
|||
http.request('get', '/xxx', { data: param }); |
|||
``` |
|||
@ -1,32 +0,0 @@ |
|||
import { AxiosRequestConfig } from "axios"; |
|||
import { excludeProps } from "./utils"; |
|||
/** |
|||
* 默认配置 |
|||
*/ |
|||
export const defaultConfig: AxiosRequestConfig = { |
|||
baseURL: "", |
|||
//10秒超时
|
|||
timeout: 10000, |
|||
headers: { |
|||
Accept: "application/json, text/plain, */*", |
|||
"Content-Type": "application/json", |
|||
"X-Requested-With": "XMLHttpRequest" |
|||
} |
|||
}; |
|||
|
|||
export function genConfig(config?: AxiosRequestConfig): AxiosRequestConfig { |
|||
if (!config) { |
|||
return defaultConfig; |
|||
} |
|||
|
|||
const { headers } = config; |
|||
if (headers && typeof headers === "object") { |
|||
defaultConfig.headers = { |
|||
...defaultConfig.headers, |
|||
...headers |
|||
}; |
|||
} |
|||
return { ...excludeProps(config!, "headers"), ...defaultConfig }; |
|||
} |
|||
|
|||
export const METHODS = ["post", "get", "put", "delete", "option", "patch"]; |
|||
@ -1,236 +0,0 @@ |
|||
import Axios, { |
|||
AxiosRequestConfig, |
|||
CancelTokenStatic, |
|||
AxiosInstance |
|||
} from "axios"; |
|||
|
|||
import NProgress from "../progress"; |
|||
|
|||
import { genConfig } from "./config"; |
|||
|
|||
import { transformConfigByMethod } from "./utils"; |
|||
|
|||
import { |
|||
cancelTokenType, |
|||
RequestMethods, |
|||
EnclosureHttpRequestConfig, |
|||
EnclosureHttpResoponse, |
|||
EnclosureHttpError |
|||
} from "./types.d"; |
|||
|
|||
class EnclosureHttp { |
|||
constructor() { |
|||
this.httpInterceptorsRequest(); |
|||
this.httpInterceptorsResponse(); |
|||
} |
|||
// 初始化配置对象
|
|||
private static initConfig: EnclosureHttpRequestConfig = {}; |
|||
|
|||
// 保存当前Axios实例对象
|
|||
private static axiosInstance: AxiosInstance = Axios.create(genConfig()); |
|||
|
|||
// 保存 EnclosureHttp实例
|
|||
private static EnclosureHttpInstance: EnclosureHttp; |
|||
|
|||
// axios取消对象
|
|||
private CancelToken: CancelTokenStatic = Axios.CancelToken; |
|||
|
|||
// 取消的凭证数组
|
|||
private sourceTokenList: Array<cancelTokenType> = []; |
|||
|
|||
// 记录当前这一次cancelToken的key
|
|||
private currentCancelTokenKey = ""; |
|||
|
|||
public get cancelTokenList(): Array<cancelTokenType> { |
|||
return this.sourceTokenList; |
|||
} |
|||
|
|||
// eslint-disable-next-line class-methods-use-this
|
|||
public set cancelTokenList(value) { |
|||
throw new Error("cancelTokenList不允许赋值"); |
|||
} |
|||
|
|||
/** |
|||
* @description 私有构造不允许实例化 |
|||
* @returns void 0 |
|||
*/ |
|||
// constructor() {}
|
|||
|
|||
/** |
|||
* @description 生成唯一取消key |
|||
* @param config axios配置 |
|||
* @returns string |
|||
*/ |
|||
// eslint-disable-next-line class-methods-use-this
|
|||
private static genUniqueKey(config: EnclosureHttpRequestConfig): string { |
|||
return `${config.url}--${JSON.stringify(config.data)}`; |
|||
} |
|||
|
|||
/** |
|||
* @description 取消重复请求 |
|||
* @returns void 0 |
|||
*/ |
|||
private cancelRepeatRequest(): void { |
|||
const temp: { [key: string]: boolean } = {}; |
|||
|
|||
this.sourceTokenList = this.sourceTokenList.reduce<Array<cancelTokenType>>( |
|||
(res: Array<cancelTokenType>, cancelToken: cancelTokenType) => { |
|||
const { cancelKey, cancelExecutor } = cancelToken; |
|||
if (!temp[cancelKey]) { |
|||
temp[cancelKey] = true; |
|||
res.push(cancelToken); |
|||
} else { |
|||
cancelExecutor(); |
|||
} |
|||
return res; |
|||
}, |
|||
[] |
|||
); |
|||
} |
|||
|
|||
/** |
|||
* @description 删除指定的CancelToken |
|||
* @returns void 0 |
|||
*/ |
|||
private deleteCancelTokenByCancelKey(cancelKey: string): void { |
|||
this.sourceTokenList = |
|||
this.sourceTokenList.length < 1 |
|||
? this.sourceTokenList.filter( |
|||
cancelToken => cancelToken.cancelKey !== cancelKey |
|||
) |
|||
: []; |
|||
} |
|||
|
|||
/** |
|||
* @description 拦截请求 |
|||
* @returns void 0 |
|||
*/ |
|||
|
|||
private httpInterceptorsRequest(): void { |
|||
EnclosureHttp.axiosInstance.interceptors.request.use( |
|||
(config: EnclosureHttpRequestConfig) => { |
|||
const $config = config; |
|||
NProgress.start(); // 每次切换页面时，调用进度条
|
|||
const cancelKey = EnclosureHttp.genUniqueKey($config); |
|||
$config.cancelToken = new this.CancelToken( |
|||
(cancelExecutor: (cancel: any) => void) => { |
|||
this.sourceTokenList.push({ cancelKey, cancelExecutor }); |
|||
} |
|||
); |
|||
this.cancelRepeatRequest(); |
|||
this.currentCancelTokenKey = cancelKey; |
|||
// 优先判断post/get等方法是否传入回掉，否则执行初始化设置等回掉
|
|||
if (typeof config.beforeRequestCallback === "function") { |
|||
config.beforeRequestCallback($config); |
|||
return $config; |
|||
} |
|||
if (EnclosureHttp.initConfig.beforeRequestCallback) { |
|||
EnclosureHttp.initConfig.beforeRequestCallback($config); |
|||
return $config; |
|||
} |
|||
return $config; |
|||
}, |
|||
error => { |
|||
return Promise.reject(error); |
|||
} |
|||
); |
|||
} |
|||
|
|||
/** |
|||
* @description 清空当前cancelTokenList |
|||
* @returns void 0 |
|||
*/ |
|||
public clearCancelTokenList(): void { |
|||
this.sourceTokenList.length = 0; |
|||
} |
|||
|
|||
/** |
|||
* @description 拦截响应 |
|||
* @returns void 0 |
|||
*/ |
|||
private httpInterceptorsResponse(): void { |
|||
const instance = EnclosureHttp.axiosInstance; |
|||
instance.interceptors.response.use( |
|||
(response: EnclosureHttpResoponse) => { |
|||
const $config = response.config; |
|||
// 请求每次成功一次就删除当前canceltoken标记
|
|||
const cancelKey = EnclosureHttp.genUniqueKey($config); |
|||
this.deleteCancelTokenByCancelKey(cancelKey); |
|||
|
|||
NProgress.done(); |
|||
// 优先判断post/get等方法是否传入回掉，否则执行初始化设置等回掉
|
|||
if (typeof $config.beforeResponseCallback === "function") { |
|||
$config.beforeResponseCallback(response); |
|||
return response.data; |
|||
} |
|||
if (EnclosureHttp.initConfig.beforeResponseCallback) { |
|||
EnclosureHttp.initConfig.beforeResponseCallback(response); |
|||
return response.data; |
|||
} |
|||
return response.data; |
|||
}, |
|||
(error: EnclosureHttpError) => { |
|||
const $error = error; |
|||
// 判断当前的请求中是否在 取消token数组理存在，如果存在则移除（单次请求流程）
|
|||
if (this.currentCancelTokenKey) { |
|||
const haskey = this.sourceTokenList.filter( |
|||
cancelToken => cancelToken.cancelKey === this.currentCancelTokenKey |
|||
).length; |
|||
if (haskey) { |
|||
this.sourceTokenList = this.sourceTokenList.filter( |
|||
cancelToken => |
|||
cancelToken.cancelKey !== this.currentCancelTokenKey |
|||
); |
|||
this.currentCancelTokenKey = ""; |
|||
} |
|||
} |
|||
$error.isCancelRequest = Axios.isCancel($error); |
|||
NProgress.done(); |
|||
// 所有的响应异常 区分来源为取消请求/非取消请求
|
|||
return Promise.reject($error); |
|||
} |
|||
); |
|||
} |
|||
|
|||
public request<T>( |
|||
method: RequestMethods, |
|||
url: string, |
|||
param?: AxiosRequestConfig, |
|||
axiosConfig?: EnclosureHttpRequestConfig |
|||
): Promise<T> { |
|||
const config = transformConfigByMethod(param, { |
|||
method, |
|||
url, |
|||
...axiosConfig |
|||
} as EnclosureHttpRequestConfig); |
|||
// 单独处理自定义请求/响应回掉
|
|||
return new Promise((resolve, reject) => { |
|||
EnclosureHttp.axiosInstance |
|||
.request(config) |
|||
.then((response: undefined) => { |
|||
resolve(response); |
|||
}) |
|||
.catch((error: any) => { |
|||
reject(error); |
|||
}); |
|||
}); |
|||
} |
|||
|
|||
public post<T>( |
|||
url: string, |
|||
params?: T, |
|||
config?: EnclosureHttpRequestConfig |
|||
): Promise<T> { |
|||
return this.request<T>("post", url, params, config); |
|||
} |
|||
|
|||
public get<T>( |
|||
url: string, |
|||
params?: T, |
|||
config?: EnclosureHttpRequestConfig |
|||
): Promise<T> { |
|||
return this.request<T>("get", url, params, config); |
|||
} |
|||
} |
|||
|
|||
export default EnclosureHttp; |
|||
@ -1,2 +1,166 @@ |
|||
import EnclosureHttp from "./core"; |
|||
export const http = new EnclosureHttp(); |
|||
import Axios, { AxiosInstance, AxiosRequestConfig } from "axios"; |
|||
import { |
|||
resultType, |
|||
PureHttpError, |
|||
RequestMethods, |
|||
PureHttpResoponse, |
|||
PureHttpRequestConfig |
|||
} from "./types.d"; |
|||
import qs from "qs"; |
|||
import NProgress from "../progress"; |
|||
// import { loadEnv } from "@build/index";
|
|||
import { getToken } from "/@/utils/auth"; |
|||
import { useUserStoreHook } from "/@/store/modules/user"; |
|||
|
|||
// 加载环境变量 VITE_PROXY_DOMAIN（开发环境） VITE_PROXY_DOMAIN_REAL（打包后的线上环境）
|
|||
// const { VITE_PROXY_DOMAIN, VITE_PROXY_DOMAIN_REAL } = loadEnv();
|
|||
|
|||
// 相关配置请参考：www.axios-js.com/zh-cn/docs/#axios-request-config-1
|
|||
const defaultConfig: AxiosRequestConfig = { |
|||
// baseURL:
|
|||
// process.env.NODE_ENV === "production"
|
|||
// ? VITE_PROXY_DOMAIN_REAL
|
|||
// : VITE_PROXY_DOMAIN,
|
|||
// 当前使用mock模拟请求，将baseURL制空，如果你的环境用到了http请求，请删除下面的baseURL启用上面的baseURL，并将11行、16行代码注释取消
|
|||
baseURL: "", |
|||
timeout: 10000, |
|||
headers: { |
|||
Accept: "application/json, text/plain, */*", |
|||
"Content-Type": "application/json", |
|||
"X-Requested-With": "XMLHttpRequest" |
|||
}, |
|||
// 数组格式参数序列化
|
|||
paramsSerializer: params => qs.stringify(params, { indices: false }) |
|||
}; |
|||
|
|||
class PureHttp { |
|||
constructor() { |
|||
this.httpInterceptorsRequest(); |
|||
this.httpInterceptorsResponse(); |
|||
} |
|||
// 初始化配置对象
|
|||
private static initConfig: PureHttpRequestConfig = {}; |
|||
|
|||
// 保存当前Axios实例对象
|
|||
private static axiosInstance: AxiosInstance = Axios.create(defaultConfig); |
|||
|
|||
// 请求拦截
|
|||
private httpInterceptorsRequest(): void { |
|||
PureHttp.axiosInstance.interceptors.request.use( |
|||
(config: PureHttpRequestConfig) => { |
|||
const $config = config; |
|||
// 开启进度条动画
|
|||
NProgress.start(); |
|||
// 优先判断post/get等方法是否传入回掉，否则执行初始化设置等回掉
|
|||
if (typeof config.beforeRequestCallback === "function") { |
|||
config.beforeRequestCallback($config); |
|||
return $config; |
|||
} |
|||
if (PureHttp.initConfig.beforeRequestCallback) { |
|||
PureHttp.initConfig.beforeRequestCallback($config); |
|||
return $config; |
|||
} |
|||
const token = getToken(); |
|||
if (token) { |
|||
const data = JSON.parse(token); |
|||
const now = new Date().getTime(); |
|||
const expired = parseInt(data.expires) - now <= 0; |
|||
if (expired) { |
|||
// token过期刷新
|
|||
useUserStoreHook() |
|||
.refreshToken(data) |
|||
.then((res: resultType) => { |
|||
config.headers["Authorization"] = "Bearer " + res.accessToken; |
|||
return $config; |
|||
}); |
|||
} else { |
|||
config.headers["Authorization"] = "Bearer " + data.accessToken; |
|||
return $config; |
|||
} |
|||
} else { |
|||
return $config; |
|||
} |
|||
}, |
|||
error => { |
|||
return Promise.reject(error); |
|||
} |
|||
); |
|||
} |
|||
|
|||
// 响应拦截
|
|||
private httpInterceptorsResponse(): void { |
|||
const instance = PureHttp.axiosInstance; |
|||
instance.interceptors.response.use( |
|||
(response: PureHttpResoponse) => { |
|||
const $config = response.config; |
|||
// 关闭进度条动画
|
|||
NProgress.done(); |
|||
// 优先判断post/get等方法是否传入回掉，否则执行初始化设置等回掉
|
|||
if (typeof $config.beforeResponseCallback === "function") { |
|||
$config.beforeResponseCallback(response); |
|||
return response.data; |
|||
} |
|||
if (PureHttp.initConfig.beforeResponseCallback) { |
|||
PureHttp.initConfig.beforeResponseCallback(response); |
|||
return response.data; |
|||
} |
|||
return response.data; |
|||
}, |
|||
(error: PureHttpError) => { |
|||
const $error = error; |
|||
$error.isCancelRequest = Axios.isCancel($error); |
|||
// 关闭进度条动画
|
|||
NProgress.done(); |
|||
// 所有的响应异常 区分来源为取消请求/非取消请求
|
|||
return Promise.reject($error); |
|||
} |
|||
); |
|||
} |
|||
|
|||
// 通用请求工具函数
|
|||
public request<T>( |
|||
method: RequestMethods, |
|||
url: string, |
|||
param?: AxiosRequestConfig, |
|||
axiosConfig?: PureHttpRequestConfig |
|||
): Promise<T> { |
|||
const config = { |
|||
method, |
|||
url, |
|||
...param, |
|||
...axiosConfig |
|||
} as PureHttpRequestConfig; |
|||
|
|||
// 单独处理自定义请求/响应回掉
|
|||
return new Promise((resolve, reject) => { |
|||
PureHttp.axiosInstance |
|||
.request(config) |
|||
.then((response: undefined) => { |
|||
resolve(response); |
|||
}) |
|||
.catch(error => { |
|||
reject(error); |
|||
}); |
|||
}); |
|||
} |
|||
|
|||
// 单独抽离的post工具函数
|
|||
public post<T>( |
|||
url: string, |
|||
params?: T, |
|||
config?: PureHttpRequestConfig |
|||
): Promise<T> { |
|||
return this.request<T>("post", url, params, config); |
|||
} |
|||
|
|||
// 单独抽离的get工具函数
|
|||
public get<T>( |
|||
url: string, |
|||
params?: T, |
|||
config?: PureHttpRequestConfig |
|||
): Promise<T> { |
|||
return this.request<T>("get", url, params, config); |
|||
} |
|||
} |
|||
|
|||
export const http = new PureHttp(); |
|||
@ -1,50 +1,39 @@ |
|||
import Axios, { |
|||
AxiosRequestConfig, |
|||
Canceler, |
|||
AxiosResponse, |
|||
Method, |
|||
AxiosError |
|||
AxiosError, |
|||
AxiosResponse, |
|||
AxiosRequestConfig |
|||
} from "axios"; |
|||
|
|||
import { METHODS } from "./config"; |
|||
|
|||
export type cancelTokenType = { cancelKey: string; cancelExecutor: Canceler }; |
|||
export type resultType = { |
|||
accessToken?: string; |
|||
}; |
|||
|
|||
export type RequestMethods = Extract< |
|||
Method, |
|||
"get" | "post" | "put" | "delete" | "patch" | "option" | "head" |
|||
>; |
|||
|
|||
export interface EnclosureHttpRequestConfig extends AxiosRequestConfig { |
|||
beforeRequestCallback?: (request: EnclosureHttpRequestConfig) => void; // 请求发送之前
|
|||
beforeResponseCallback?: (response: EnclosureHttpResoponse) => void; // 相应返回之前
|
|||
export interface PureHttpError extends AxiosError { |
|||
isCancelRequest?: boolean; |
|||
} |
|||
|
|||
export interface EnclosureHttpResoponse extends AxiosResponse { |
|||
config: EnclosureHttpRequestConfig; |
|||
export interface PureHttpResoponse extends AxiosResponse { |
|||
config: PureHttpRequestConfig; |
|||
} |
|||
|
|||
export interface EnclosureHttpError extends AxiosError { |
|||
isCancelRequest?: boolean; |
|||
export interface PureHttpRequestConfig extends AxiosRequestConfig { |
|||
beforeRequestCallback?: (request: PureHttpRequestConfig) => void; |
|||
beforeResponseCallback?: (response: PureHttpResoponse) => void; |
|||
} |
|||
|
|||
export default class EnclosureHttp { |
|||
cancelTokenList: Array<cancelTokenType>; |
|||
clearCancelTokenList(): void; |
|||
export default class PureHttp { |
|||
request<T>( |
|||
method: RequestMethods, |
|||
url: string, |
|||
param?: AxiosRequestConfig, |
|||
axiosConfig?: EnclosureHttpRequestConfig |
|||
): Promise<T>; |
|||
post<T>( |
|||
url: string, |
|||
params?: T, |
|||
config?: EnclosureHttpRequestConfig |
|||
): Promise<T>; |
|||
get<T>( |
|||
url: string, |
|||
params?: T, |
|||
config?: EnclosureHttpRequestConfig |
|||
axiosConfig?: PureHttpRequestConfig |
|||
): Promise<T>; |
|||
post<T>(url: string, params?: T, config?: PureHttpRequestConfig): Promise<T>; |
|||
get<T>(url: string, params?: T, config?: PureHttpRequestConfig): Promise<T>; |
|||
} |
|||
@ -1,29 +0,0 @@ |
|||
import { EnclosureHttpRequestConfig } from "./types.d"; |
|||
|
|||
export function excludeProps<T extends { [key: string]: any }>( |
|||
origin: T, |
|||
prop: string |
|||
): { [key: string]: T } { |
|||
return Object.keys(origin) |
|||
.filter(key => !prop.includes(key)) |
|||
.reduce((res, key) => { |
|||
res[key] = origin[key]; |
|||
return res; |
|||
}, {} as { [key: string]: T }); |
|||
} |
|||
|
|||
export function transformConfigByMethod( |
|||
params: any, |
|||
config: EnclosureHttpRequestConfig |
|||
): EnclosureHttpRequestConfig { |
|||
const { method } = config; |
|||
const props = ["delete", "get", "head", "options"].includes( |
|||
method!.toLocaleLowerCase() |
|||
) |
|||
? "params" |
|||
: "data"; |
|||
return { |
|||
...config, |
|||
[props]: params |
|||
}; |
|||
} |
|||
@ -1,19 +0,0 @@ |
|||
import { i18n } from "../plugins/i18n"; |
|||
|
|||
/** |
|||
* 消息转换 |
|||
* @param message message |
|||
* @param isI18n 如果true,获取对应的消息,否则返回this |
|||
* @returns message |
|||
*/ |
|||
export function transformI18n(message = "", isI18n = false) { |
|||
if (!message) { |
|||
return ""; |
|||
} |
|||
if (isI18n) { |
|||
//@ts-ignore
|
|||
return i18n.global.tc.call(i18n.global, message); |
|||
} else { |
|||
return message; |
|||
} |
|||
} |
|||
@ -1,53 +0,0 @@ |
|||
import { loadEnv } from "@build/utils"; |
|||
import { merge } from "lodash-es"; |
|||
import tsCookies from "typescript-cookie/dist/src/compat"; |
|||
|
|||
class Cookies { |
|||
private static env = loadEnv(); |
|||
constructor() {} |
|||
/** |
|||
* 存储 cookie 值 |
|||
* @param name |
|||
* @param value |
|||
* @param cookieSetting |
|||
*/ |
|||
set(name = "default", value = "", cookieSetting = {}) { |
|||
const currentCookieSetting = { |
|||
expires: 1 |
|||
}; |
|||
merge(currentCookieSetting, cookieSetting); |
|||
tsCookies.set( |
|||
`${Cookies.env.VITE_TITLE}-${Cookies.env.VITE_VERSION}-${name}`, |
|||
value, |
|||
currentCookieSetting |
|||
); |
|||
} |
|||
/** |
|||
* 拿到 cookie 值 |
|||
* @param name |
|||
* @returns |
|||
*/ |
|||
get(name = "default") { |
|||
return tsCookies.get( |
|||
`${Cookies.env.VITE_TITLE}-${Cookies.env.VITE_VERSION}-${name}` |
|||
); |
|||
} |
|||
/** |
|||
* 拿到 cookie 全部的值 |
|||
* @returns |
|||
*/ |
|||
getAll() { |
|||
return tsCookies.get(); |
|||
} |
|||
/** |
|||
* 删除 cookie |
|||
* @param name |
|||
*/ |
|||
remove(name = "default") { |
|||
tsCookies.remove( |
|||
`${Cookies.env.VITE_TITLE}-${Cookies.env.VITE_VERSION}-${name}` |
|||
); |
|||
} |
|||
} |
|||
|
|||
export const cookies = new Cookies(); |
|||
@ -1,93 +0,0 @@ |
|||
import { loadEnv } from "@build/utils"; |
|||
import { LocalStorage, LowSync } from "lowdb"; |
|||
import { chain, cloneDeep } from "lodash-es"; |
|||
import { storageLocal } from "."; |
|||
import { cookies } from "./cookie"; |
|||
type Data = { |
|||
database: {}; |
|||
sys: {}; |
|||
}; |
|||
/** |
|||
* db 数据存储,采用 LocalStorage存储 |
|||
*/ |
|||
class DB { |
|||
private db: LowSync<Data>; |
|||
private static env = loadEnv(); |
|||
constructor() { |
|||
this.db = new LowSync<Data>( |
|||
new LocalStorage<Data>(`${DB.env.VITE_TITLE}-${DB.env.VITE_VERSION}`) |
|||
); |
|||
this.initialization(); |
|||
// @ts-ignore
|
|||
this.db.chain = chain(this.db.data); |
|||
} |
|||
private initialization() { |
|||
this.db.data = storageLocal.getItem( |
|||
`${DB.env.VITE_TITLE}-${DB.env.VITE_VERSION}` |
|||
) || { database: {}, sys: {} }; |
|||
this.db.write(); |
|||
} |
|||
/** |
|||
* 检查路径是否存在 不存在的话初始化 |
|||
* @param param0 |
|||
* @returns path |
|||
*/ |
|||
pathInit({ |
|||
dbName = "database", |
|||
path = "", |
|||
user = true, |
|||
validator = () => true, |
|||
defaultValue = "" |
|||
}): string { |
|||
const uuid = cookies.get("uuid") || "ghost-uuid"; |
|||
const currentPath = `${dbName}.${user ? `user.${uuid}` : "public"}${ |
|||
path ? `.${path}` : "" |
|||
}`;
|
|||
// @ts-ignore
|
|||
const value = this.db.chain.get(currentPath).value(); |
|||
// @ts-ignore
|
|||
if (!(value !== undefined && validator(value))) { |
|||
// @ts-ignore
|
|||
this.db.chain.set(currentPath, defaultValue).value(); |
|||
this.db.write(); |
|||
} |
|||
return currentPath; |
|||
} |
|||
/** |
|||
*将数据存储到指定位置 | 路径不存在会自动初始化 |
|||
* |
|||
* 效果类似于取值 dbName.path = value |
|||
* @param param0 |
|||
*/ |
|||
dbSet({ dbName = "database", path = "", value = "", user = false }): void { |
|||
const currentPath = this.pathInit({ |
|||
dbName, |
|||
path, |
|||
user |
|||
}); |
|||
// @ts-ignore
|
|||
this.db.chain.set(currentPath, value).value(); |
|||
this.db.write(); |
|||
} |
|||
/** |
|||
* 获取数据 |
|||
* |
|||
* 效果类似于取值 dbName.path || defaultValue |
|||
* @param param0 |
|||
* @returns |
|||
*/ |
|||
dbGet({ |
|||
dbName = "database", |
|||
path = "", |
|||
defaultValue = "", |
|||
user = false |
|||
}): any { |
|||
// @ts-ignore
|
|||
const values = this.db.chain |
|||
.get(this.pathInit({ dbName, path, user, defaultValue })) |
|||
.value(); |
|||
return cloneDeep(values); |
|||
} |
|||
} |
|||
|
|||
export const db = new DB(); |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue