🎨 use alova / add nprogress
This commit is contained in:
@@ -8,7 +8,7 @@ VITE_APP_BASE_API='/api'
|
|||||||
VITE_APP_TITLE=开发环境
|
VITE_APP_TITLE=开发环境
|
||||||
|
|
||||||
# 网络请求公用地址
|
# 网络请求公用地址
|
||||||
VITE_API_BASE_URL='http://127.0.0.1:5050'
|
VITE_API_BASE_URL='http://127.0.0.1:8080'
|
||||||
|
|
||||||
VITE_TITLE_NAME='五味子云相册'
|
VITE_TITLE_NAME='五味子云相册'
|
||||||
|
|
||||||
|
@@ -9,15 +9,19 @@
|
|||||||
"preview": "vite preview"
|
"preview": "vite preview"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@alova/adapter-axios": "^2.0.5",
|
||||||
"@ant-design/icons-vue": "^7.0.1",
|
"@ant-design/icons-vue": "^7.0.1",
|
||||||
"@types/crypto-js": "^4.2.2",
|
"@types/crypto-js": "^4.2.2",
|
||||||
"@types/node": "^22.1.0",
|
"@types/node": "^22.1.0",
|
||||||
|
"@types/nprogress": "^0.2.3",
|
||||||
|
"alova": "^3.0.5",
|
||||||
"ant-design-vue": "^4.2.3",
|
"ant-design-vue": "^4.2.3",
|
||||||
"axios": "^1.7.3",
|
"axios": "^1.7.3",
|
||||||
"crypto-js": "^4.2.0",
|
"crypto-js": "^4.2.0",
|
||||||
"eslint": "9.x",
|
"eslint": "9.x",
|
||||||
"less": "^4.2.0",
|
"less": "^4.2.0",
|
||||||
"localforage": "^1.10.0",
|
"localforage": "^1.10.0",
|
||||||
|
"nprogress": "^0.2.0",
|
||||||
"pinia": "^2.2.1",
|
"pinia": "^2.2.1",
|
||||||
"pinia-plugin-persistedstate": "^3.2.1",
|
"pinia-plugin-persistedstate": "^3.2.1",
|
||||||
"unplugin-auto-import": "^0.18.2",
|
"unplugin-auto-import": "^0.18.2",
|
||||||
|
11
src/api/user/index.ts
Normal file
11
src/api/user/index.ts
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
import {service} from "@/utils/alova/service.ts";
|
||||||
|
|
||||||
|
|
||||||
|
export const getUserInfo = () => {
|
||||||
|
return service.Get('/api/auth/user/List', {
|
||||||
|
meta: {
|
||||||
|
ignoreToken: true
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
};
|
@@ -6,7 +6,10 @@
|
|||||||
},
|
},
|
||||||
}"
|
}"
|
||||||
>
|
>
|
||||||
<router-view>
|
<router-view v-slot="{ Component, route }">
|
||||||
|
<transition name="animation" mode="out-in">
|
||||||
|
<component :is="Component" :key="route.path"/>
|
||||||
|
</transition>
|
||||||
</router-view>
|
</router-view>
|
||||||
</AConfigProvider>
|
</AConfigProvider>
|
||||||
</template>
|
</template>
|
||||||
|
16
src/main.ts
16
src/main.ts
@@ -1,15 +1,15 @@
|
|||||||
import {createApp} from 'vue'
|
import {createApp} from 'vue';
|
||||||
import App from './App.vue'
|
import App from './App.vue';
|
||||||
import '@/assets/styles/scroll-bar.scss'
|
import '@/assets/styles/scroll-bar.scss';
|
||||||
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
|
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
|
||||||
//Pinia
|
//Pinia
|
||||||
import {createPinia, Pinia} from 'pinia'
|
import {createPinia, Pinia} from 'pinia';
|
||||||
import router from "@/router/router.ts";
|
import router from "@/router/router.ts";
|
||||||
|
|
||||||
const pinia: Pinia = createPinia()
|
const pinia: Pinia = createPinia();
|
||||||
pinia.use(piniaPluginPersistedstate)
|
pinia.use(piniaPluginPersistedstate);
|
||||||
|
|
||||||
createApp(App)
|
createApp(App)
|
||||||
.use(router)
|
.use(router)
|
||||||
.use(pinia)
|
.use(pinia)
|
||||||
.mount('#app')
|
.mount('#app');
|
||||||
|
@@ -1,10 +1,11 @@
|
|||||||
export default [
|
export default [
|
||||||
{
|
{
|
||||||
path: '/',
|
path: '/',
|
||||||
name: 'login',
|
name: 'login',
|
||||||
component: () => import('@/views/Login/LoginPage.vue'),
|
component: () => import('@/views/Login/LoginPage.vue'),
|
||||||
meta: {
|
meta: {
|
||||||
title: '登录页'
|
requiresAuth: false,
|
||||||
}
|
title: '登录页'
|
||||||
}
|
}
|
||||||
|
}
|
||||||
];
|
];
|
||||||
|
@@ -4,6 +4,7 @@ export default [
|
|||||||
name: 'test',
|
name: 'test',
|
||||||
component: () => import('@/views/TestTheme.vue'),
|
component: () => import('@/views/TestTheme.vue'),
|
||||||
meta: {
|
meta: {
|
||||||
|
requiresAuth: true,
|
||||||
title: '测试'
|
title: '测试'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@@ -1,7 +1,11 @@
|
|||||||
import {createRouter, createWebHistory, RouteRecordRaw} from 'vue-router';
|
/* eslint-disable */
|
||||||
|
// @ts-nocheck
|
||||||
|
import {createRouter, createWebHistory, Router, RouteRecordRaw} from 'vue-router';
|
||||||
import login from './modules/login';
|
import login from './modules/login';
|
||||||
import test from "@/router/modules/test.ts";
|
import test from "@/router/modules/test.ts";
|
||||||
|
import useStore from "@/store";
|
||||||
|
import {message} from "ant-design-vue";
|
||||||
|
import {close, start} from '@/utils/nprogress/nprogress.ts';
|
||||||
|
|
||||||
|
|
||||||
const routes: Array<RouteRecordRaw> = [
|
const routes: Array<RouteRecordRaw> = [
|
||||||
@@ -10,8 +14,33 @@ const routes: Array<RouteRecordRaw> = [
|
|||||||
|
|
||||||
];
|
];
|
||||||
|
|
||||||
const router = createRouter({
|
const router: Router = createRouter({
|
||||||
history: createWebHistory(),
|
history: createWebHistory(),
|
||||||
routes
|
routes
|
||||||
});
|
});
|
||||||
|
|
||||||
|
router.beforeEach((to, from, next) => {
|
||||||
|
start();
|
||||||
|
if (to.meta.requiresAuth) {
|
||||||
|
const user = useStore().user;
|
||||||
|
const token: string | undefined = user.getUser()?.token;
|
||||||
|
const userId: string | undefined = user.getUser()?.userId;
|
||||||
|
if (token !== undefined && userId !== undefined) {
|
||||||
|
next();
|
||||||
|
} else {
|
||||||
|
message.warn('请先登录').then();
|
||||||
|
next({
|
||||||
|
path: '/',
|
||||||
|
query: {redirect: to.fullPath}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
next();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
router.afterEach(() => {
|
||||||
|
// 关闭进度条
|
||||||
|
close();
|
||||||
|
});
|
||||||
export default router;
|
export default router;
|
||||||
|
@@ -43,7 +43,7 @@ export const useThemeStore = defineStore(
|
|||||||
{
|
{
|
||||||
persist: {
|
persist: {
|
||||||
key: 'theme',
|
key: 'theme',
|
||||||
paths: ['themeName','darkMode',"darkModeComp","themeConfig"],
|
paths: ['themeName','darkMode'],
|
||||||
storage: handleLocalforage,
|
storage: handleLocalforage,
|
||||||
serializer: {
|
serializer: {
|
||||||
deserialize: parse,
|
deserialize: parse,
|
||||||
|
17
src/utils/alova/adapter/localforageStorageAdapter.ts
Normal file
17
src/utils/alova/adapter/localforageStorageAdapter.ts
Normal file
@@ -0,0 +1,17 @@
|
|||||||
|
import {handleLocalforage} from "@/utils/localforage";
|
||||||
|
|
||||||
|
export const localforageStorageAdapter = {
|
||||||
|
set(key: string, value: any) {
|
||||||
|
handleLocalforage.setItem(key, value);
|
||||||
|
},
|
||||||
|
get(key: string) {
|
||||||
|
const data: string = handleLocalforage.getItem(key);
|
||||||
|
return data ? JSON.parse(data) : data;
|
||||||
|
},
|
||||||
|
remove(key: any) {
|
||||||
|
handleLocalforage.removeItem(key);
|
||||||
|
},
|
||||||
|
clear() {
|
||||||
|
handleLocalforage.clear().then();
|
||||||
|
}
|
||||||
|
};
|
153
src/utils/alova/service.ts
Normal file
153
src/utils/alova/service.ts
Normal file
@@ -0,0 +1,153 @@
|
|||||||
|
import {createAlova} from 'alova';
|
||||||
|
|
||||||
|
import VueHook from 'alova/vue';
|
||||||
|
import useStore from "@/store";
|
||||||
|
import {axiosRequestAdapter} from "@alova/adapter-axios";
|
||||||
|
import {AxiosError, AxiosResponse} from "axios";
|
||||||
|
import {message} from "ant-design-vue";
|
||||||
|
import {localforageStorageAdapter} from "@/utils/alova/adapter/localforageStorageAdapter.ts";
|
||||||
|
|
||||||
|
export const service = createAlova({
|
||||||
|
timeout: 5000,
|
||||||
|
baseURL: import.meta.env.VITE_APP_BASE_API,
|
||||||
|
statesHook: VueHook,
|
||||||
|
// 请求适配器
|
||||||
|
requestAdapter: axiosRequestAdapter(),
|
||||||
|
l2Cache: localforageStorageAdapter,
|
||||||
|
cacheFor: {
|
||||||
|
GET: {
|
||||||
|
mode: 'restore',
|
||||||
|
expire: 60 * 10 * 1000
|
||||||
|
},
|
||||||
|
},
|
||||||
|
cacheLogger: import.meta.env.VITE_NODE_ENV === 'development',
|
||||||
|
// 设置全局的请求拦截器
|
||||||
|
beforeRequest(method) {
|
||||||
|
if (!method.meta?.ignoreToken) {
|
||||||
|
const user = useStore().user;
|
||||||
|
method.config.headers.token = user.getUser()?.token;
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
// 响应拦截器
|
||||||
|
responded: {
|
||||||
|
onSuccess: async (response: AxiosResponse) => {
|
||||||
|
if (response.data instanceof Blob) {
|
||||||
|
return response;
|
||||||
|
} else {
|
||||||
|
return response.data;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onError(error: AxiosError) {
|
||||||
|
const {response} = error;
|
||||||
|
if (response) {
|
||||||
|
handleCode(response.status);
|
||||||
|
}
|
||||||
|
if (!window.navigator.onLine) {
|
||||||
|
message.error("网络连接失败").then();
|
||||||
|
return Promise.reject(error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
function handleCode(code: number): void {
|
||||||
|
switch (code) {
|
||||||
|
case 400:
|
||||||
|
message
|
||||||
|
.open({
|
||||||
|
content: "请求错误(400)",
|
||||||
|
type: "error",
|
||||||
|
})
|
||||||
|
.then();
|
||||||
|
break;
|
||||||
|
case 401:
|
||||||
|
message
|
||||||
|
.open({
|
||||||
|
content: "未授权,请重新登录(401)",
|
||||||
|
type: "error",
|
||||||
|
})
|
||||||
|
.then();
|
||||||
|
break;
|
||||||
|
case 403:
|
||||||
|
message
|
||||||
|
.open({
|
||||||
|
content: "拒绝访问(403)",
|
||||||
|
type: "error",
|
||||||
|
})
|
||||||
|
.then();
|
||||||
|
break;
|
||||||
|
case 404:
|
||||||
|
message
|
||||||
|
.open({
|
||||||
|
content: "请求出错(404)",
|
||||||
|
type: "error",
|
||||||
|
})
|
||||||
|
.then();
|
||||||
|
break;
|
||||||
|
case 408:
|
||||||
|
message
|
||||||
|
.open({
|
||||||
|
content: "请求超时(408)",
|
||||||
|
type: "error",
|
||||||
|
})
|
||||||
|
.then();
|
||||||
|
break;
|
||||||
|
case 500:
|
||||||
|
message
|
||||||
|
.open({
|
||||||
|
content: "服务器错误(500)",
|
||||||
|
type: "error",
|
||||||
|
})
|
||||||
|
.then();
|
||||||
|
break;
|
||||||
|
case 501:
|
||||||
|
message
|
||||||
|
.open({
|
||||||
|
content: "服务未实现(501)",
|
||||||
|
type: "error",
|
||||||
|
})
|
||||||
|
.then();
|
||||||
|
break;
|
||||||
|
case 502:
|
||||||
|
message
|
||||||
|
.open({
|
||||||
|
content: "网络错误(502)",
|
||||||
|
type: "error",
|
||||||
|
})
|
||||||
|
.then();
|
||||||
|
break;
|
||||||
|
case 503:
|
||||||
|
message
|
||||||
|
.open({
|
||||||
|
content: "服务不可用(503)",
|
||||||
|
type: "error",
|
||||||
|
})
|
||||||
|
.then();
|
||||||
|
break;
|
||||||
|
case 504:
|
||||||
|
message
|
||||||
|
.open({
|
||||||
|
content: "网络超时(504)",
|
||||||
|
type: "error",
|
||||||
|
})
|
||||||
|
.then();
|
||||||
|
break;
|
||||||
|
case 505:
|
||||||
|
message
|
||||||
|
.open({
|
||||||
|
content: "HTTP版本不受支持(505)",
|
||||||
|
type: "error",
|
||||||
|
})
|
||||||
|
.then();
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
message
|
||||||
|
.open({
|
||||||
|
content: `连接出错(${code})!`,
|
||||||
|
type: "error",
|
||||||
|
})
|
||||||
|
.then();
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
@@ -1,163 +1,164 @@
|
|||||||
/** @format */
|
/** @format */
|
||||||
|
|
||||||
import axios, { AxiosInstance, AxiosRequestConfig } from "axios";
|
import axios, {AxiosInstance, AxiosRequestConfig} from "axios";
|
||||||
import { message } from "ant-design-vue";
|
import {message} from "ant-design-vue";
|
||||||
import { getStorageFromKey } from "@/utils/localStorage/config.ts";
|
import useStore from "@/store";
|
||||||
|
|
||||||
class Request {
|
class Request {
|
||||||
private instance: AxiosInstance | undefined;
|
private instance: AxiosInstance | undefined;
|
||||||
|
|
||||||
constructor(config: AxiosRequestConfig) {
|
constructor(config: AxiosRequestConfig) {
|
||||||
this.instance = axios.create(config);
|
this.instance = axios.create(config);
|
||||||
// 全局请求拦截
|
// 全局请求拦截
|
||||||
this.instance.interceptors.request.use(
|
this.instance.interceptors.request.use(
|
||||||
(config) => {
|
(config) => {
|
||||||
const token: string | null = getStorageFromKey("token");
|
const user = useStore().user;
|
||||||
if (token) {
|
const token: string | undefined = user.getUser()?.token;
|
||||||
config.headers.Authorization = `${import.meta.env.VITE_APP_TOKEN_KEY} ${token}`;
|
if (token) {
|
||||||
}
|
config.headers.Authorization = `${import.meta.env.VITE_APP_TOKEN_KEY} ${token}`;
|
||||||
return config;
|
}
|
||||||
},
|
return config;
|
||||||
(error) => {
|
},
|
||||||
return Promise.reject(error);
|
(error) => {
|
||||||
},
|
return Promise.reject(error);
|
||||||
);
|
},
|
||||||
|
);
|
||||||
|
|
||||||
// 全局响应拦截
|
// 全局响应拦截
|
||||||
this.instance.interceptors.response.use(
|
this.instance.interceptors.response.use(
|
||||||
(response) => {
|
(response) => {
|
||||||
if (response.data instanceof Blob) {
|
if (response.data instanceof Blob) {
|
||||||
return response;
|
return response;
|
||||||
} else {
|
} else {
|
||||||
return response.data;
|
return response.data;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
(error) => {
|
(error) => {
|
||||||
const { response } = error;
|
const {response} = error;
|
||||||
if (response) {
|
if (response) {
|
||||||
this.handleCode(response.status);
|
this.handleCode(response.status);
|
||||||
}
|
}
|
||||||
if (!window.navigator.onLine) {
|
if (!window.navigator.onLine) {
|
||||||
message.error("网络连接失败");
|
message.error("网络连接失败");
|
||||||
return Promise.reject(error);
|
return Promise.reject(error);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
handleCode(code: number): void {
|
handleCode(code: number): void {
|
||||||
switch (code) {
|
switch (code) {
|
||||||
case 400:
|
case 400:
|
||||||
message
|
message
|
||||||
.open({
|
.open({
|
||||||
content: "请求错误(400)",
|
content: "请求错误(400)",
|
||||||
type: "error",
|
type: "error",
|
||||||
})
|
})
|
||||||
.then();
|
.then();
|
||||||
break;
|
break;
|
||||||
case 401:
|
case 401:
|
||||||
message
|
message
|
||||||
.open({
|
.open({
|
||||||
content: "未授权,请重新登录(401)",
|
content: "未授权,请重新登录(401)",
|
||||||
type: "error",
|
type: "error",
|
||||||
})
|
})
|
||||||
.then();
|
.then();
|
||||||
break;
|
break;
|
||||||
case 403:
|
case 403:
|
||||||
message
|
message
|
||||||
.open({
|
.open({
|
||||||
content: "拒绝访问(403)",
|
content: "拒绝访问(403)",
|
||||||
type: "error",
|
type: "error",
|
||||||
})
|
})
|
||||||
.then();
|
.then();
|
||||||
break;
|
break;
|
||||||
case 404:
|
case 404:
|
||||||
message
|
message
|
||||||
.open({
|
.open({
|
||||||
content: "请求出错(404)",
|
content: "请求出错(404)",
|
||||||
type: "error",
|
type: "error",
|
||||||
})
|
})
|
||||||
.then();
|
.then();
|
||||||
break;
|
break;
|
||||||
case 408:
|
case 408:
|
||||||
message
|
message
|
||||||
.open({
|
.open({
|
||||||
content: "请求超时(408)",
|
content: "请求超时(408)",
|
||||||
type: "error",
|
type: "error",
|
||||||
})
|
})
|
||||||
.then();
|
.then();
|
||||||
break;
|
break;
|
||||||
case 500:
|
case 500:
|
||||||
message
|
message
|
||||||
.open({
|
.open({
|
||||||
content: "服务器错误(500)",
|
content: "服务器错误(500)",
|
||||||
type: "error",
|
type: "error",
|
||||||
})
|
})
|
||||||
.then();
|
.then();
|
||||||
break;
|
break;
|
||||||
case 501:
|
case 501:
|
||||||
message
|
message
|
||||||
.open({
|
.open({
|
||||||
content: "服务未实现(501)",
|
content: "服务未实现(501)",
|
||||||
type: "error",
|
type: "error",
|
||||||
})
|
})
|
||||||
.then();
|
.then();
|
||||||
break;
|
break;
|
||||||
case 502:
|
case 502:
|
||||||
message
|
message
|
||||||
.open({
|
.open({
|
||||||
content: "网络错误(502)",
|
content: "网络错误(502)",
|
||||||
type: "error",
|
type: "error",
|
||||||
})
|
})
|
||||||
.then();
|
.then();
|
||||||
break;
|
break;
|
||||||
case 503:
|
case 503:
|
||||||
message
|
message
|
||||||
.open({
|
.open({
|
||||||
content: "服务不可用(503)",
|
content: "服务不可用(503)",
|
||||||
type: "error",
|
type: "error",
|
||||||
})
|
})
|
||||||
.then();
|
.then();
|
||||||
break;
|
break;
|
||||||
case 504:
|
case 504:
|
||||||
message
|
message
|
||||||
.open({
|
.open({
|
||||||
content: "网络超时(504)",
|
content: "网络超时(504)",
|
||||||
type: "error",
|
type: "error",
|
||||||
})
|
})
|
||||||
.then();
|
.then();
|
||||||
break;
|
break;
|
||||||
case 505:
|
case 505:
|
||||||
message
|
message
|
||||||
.open({
|
.open({
|
||||||
content: "HTTP版本不受支持(505)",
|
content: "HTTP版本不受支持(505)",
|
||||||
type: "error",
|
type: "error",
|
||||||
})
|
})
|
||||||
.then();
|
.then();
|
||||||
break;
|
break;
|
||||||
default:
|
default:
|
||||||
message
|
message
|
||||||
.open({
|
.open({
|
||||||
content: `连接出错(${code})!`,
|
content: `连接出错(${code})!`,
|
||||||
type: "error",
|
type: "error",
|
||||||
})
|
})
|
||||||
.then();
|
.then();
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
request<T>(config: AxiosRequestConfig<T>): Promise<T> {
|
request<T>(config: AxiosRequestConfig<T>): Promise<T> {
|
||||||
return new Promise<T>((resolve, reject) => {
|
return new Promise<T>((resolve, reject) => {
|
||||||
this.instance
|
this.instance
|
||||||
?.request<T, T>(config)
|
?.request<T, T>(config)
|
||||||
.then((res) => {
|
.then((res) => {
|
||||||
resolve(res);
|
resolve(res);
|
||||||
})
|
})
|
||||||
.catch((err) => {
|
.catch((err) => {
|
||||||
reject(err);
|
reject(err);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default Request;
|
export default Request;
|
||||||
|
@@ -5,87 +5,86 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
interface Options {
|
interface Options {
|
||||||
/** key前缀 */
|
/** key前缀 */
|
||||||
prefix?: string;
|
prefix?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
/** 默认配置 */
|
/** 默认配置 */
|
||||||
const defaultOptions: Options = {
|
const defaultOptions: Options = {
|
||||||
prefix: "",
|
prefix: "",
|
||||||
};
|
};
|
||||||
|
|
||||||
class CookieStorage {
|
class CookieStorage {
|
||||||
private prefix: string;
|
private prefix: string;
|
||||||
|
|
||||||
constructor(options: Options = defaultOptions) {
|
constructor(options: Options = defaultOptions) {
|
||||||
const { prefix } = options;
|
const {prefix} = options;
|
||||||
this.prefix = prefix ?? "";
|
this.prefix = prefix ?? "";
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @description: 设置cookie
|
* @description: 设置cookie
|
||||||
* @param {string} key 键
|
* @param {string} key 键
|
||||||
* @param {any} value 值
|
* @param {any} value 值
|
||||||
* @param {number} expires 过期时间s毫秒,不传默认2年有效
|
* @param {number} expires 过期时间s毫秒,不传默认2年有效
|
||||||
* @Date: 2023-05-17 18:10:34
|
* @Date: 2023-05-17 18:10:34
|
||||||
* @Author: mulingyuer
|
* @Author: mulingyuer
|
||||||
*/
|
*/
|
||||||
public setItem(key: string, value: string | number, expires?: number): void {
|
public setItem(key: string, value: string | number, expires?: number): void {
|
||||||
const timestamp = Date.now();
|
const timestamp = Date.now();
|
||||||
if (typeof expires === "number") {
|
if (typeof expires === "number") {
|
||||||
expires = timestamp + expires;
|
expires = timestamp + expires;
|
||||||
} else {
|
} else {
|
||||||
expires = timestamp + 2 * 365 * 24 * 60 * 60 * 1000;
|
expires = timestamp + 2 * 365 * 24 * 60 * 60 * 1000;
|
||||||
}
|
}
|
||||||
document.cookie = `${this.prefix}${key}=${value};expires=${new Date(expires).toUTCString()}`;
|
document.cookie = `${this.prefix}${key}=${value};expires=${new Date(expires).toUTCString()}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @description: 获取cookie
|
* @description: 获取cookie
|
||||||
* @param {string} key 键
|
* @param {string} key 键
|
||||||
* @Date: 2023-05-17 18:31:50
|
* @Date: 2023-05-17 18:31:50
|
||||||
* @Author: mulingyuer
|
* @Author: mulingyuer
|
||||||
*/
|
*/
|
||||||
public getItem(key: string): string | undefined {
|
public getItem(key: string): string | undefined {
|
||||||
const cookies = document.cookie.split("; ");
|
const cookies = document.cookie.split("; ");
|
||||||
let val: string | undefined = undefined;
|
let val: string | undefined = undefined;
|
||||||
cookies.find((item) => {
|
cookies.find((item) => {
|
||||||
const [k, v] = item.split("=");
|
const [k, v] = item.split("=");
|
||||||
if (k === `${this.prefix}${key}`) {
|
if (k === `${this.prefix}${key}`) {
|
||||||
val = v;
|
val = v;
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
return false;
|
return false;
|
||||||
});
|
});
|
||||||
|
|
||||||
return val;
|
return val;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @description: 删除指定key的cookie
|
* @description: 删除指定key的cookie
|
||||||
* @param {string} key 键
|
* @param {string} key 键
|
||||||
* @Date: 2023-05-17 18:32:56
|
* @Date: 2023-05-17 18:32:56
|
||||||
* @Author: mulingyuer
|
* @Author: mulingyuer
|
||||||
*/
|
*/
|
||||||
public removeItem(key: string): void {
|
public removeItem(key: string): void {
|
||||||
this.setItem(key, "", -1);
|
this.setItem(key, "", -1);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @description: 清空所有cookie
|
* @description: 清空所有cookie
|
||||||
* @Date: 2023-05-17 23:13:04
|
* @Date: 2023-05-17 23:13:04
|
||||||
* @Author: mulingyuer
|
* @Author: mulingyuer
|
||||||
*/
|
*/
|
||||||
public clear(): void {
|
public clear(): void {
|
||||||
const cookies = document.cookie.split("; ");
|
const cookies = document.cookie.split("; ");
|
||||||
cookies.forEach((item) => {
|
cookies.forEach((item) => {
|
||||||
const [k] = item.split("=");
|
const [k] = item.split("=");
|
||||||
this.removeItem(k);
|
this.removeItem(k);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const cookieStorage = new CookieStorage();
|
const cookieStorage = new CookieStorage();
|
||||||
|
|
||||||
export default cookieStorage;
|
export {cookieStorage};
|
||||||
export { CookieStorage };
|
|
||||||
|
@@ -41,7 +41,7 @@ export const decrypt = (data: string | unknown) => {
|
|||||||
|
|
||||||
export const handleLocalforage = {
|
export const handleLocalforage = {
|
||||||
config: async (options?: LocalForageOptions) => localforage.config(options || {}),
|
config: async (options?: LocalForageOptions) => localforage.config(options || {}),
|
||||||
setItem: (key: string, value: string) => {
|
setItem: (key: string, value: any) => {
|
||||||
localforage.setItem(key, encrypt(value));
|
localforage.setItem(key, encrypt(value));
|
||||||
},
|
},
|
||||||
getItem: (key: string) => {
|
getItem: (key: string) => {
|
||||||
|
22
src/utils/nprogress/nprogress.ts
Normal file
22
src/utils/nprogress/nprogress.ts
Normal file
@@ -0,0 +1,22 @@
|
|||||||
|
import NProgress from 'nprogress';
|
||||||
|
import 'nprogress/nprogress.css';
|
||||||
|
|
||||||
|
//全局进度条的配置
|
||||||
|
NProgress.configure({
|
||||||
|
easing: 'ease', // 动画方式
|
||||||
|
speed: 300, // 递增进度条的速度
|
||||||
|
showSpinner: false, // 是否显示加载ico
|
||||||
|
trickleSpeed: 200, // 自动递增间隔
|
||||||
|
minimum: 0.3, // 更改启动时使用的最小百分比
|
||||||
|
parent: 'body' //指定进度条的父容器
|
||||||
|
});
|
||||||
|
|
||||||
|
// 打开进度条
|
||||||
|
export const start = () => {
|
||||||
|
NProgress.start();
|
||||||
|
};
|
||||||
|
|
||||||
|
// 关闭进度条
|
||||||
|
export const close = () => {
|
||||||
|
NProgress.done();
|
||||||
|
};
|
@@ -1,15 +1,20 @@
|
|||||||
<template>
|
<template>
|
||||||
<AButton> 测试页面</AButton>
|
<AButton> alvoa</AButton>
|
||||||
</template>
|
</template>
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import useStore from "@/store";
|
// import {getUserInfo} from "@/api/user";
|
||||||
|
// import {useRequest} from "alova/client";
|
||||||
const store = useStore().user;
|
//
|
||||||
store.setUser({
|
// const {loading, data, send} = useRequest(getUserInfo, {
|
||||||
token: "test",
|
// immediate: true,
|
||||||
userId: "1",
|
// throttle: 3000,
|
||||||
});
|
// });
|
||||||
console.log(store.getUser()?.userId);
|
// const handleClick = () => {
|
||||||
|
// send();
|
||||||
|
// console.log(loading.value);
|
||||||
|
// console.log(data.value);
|
||||||
|
//
|
||||||
|
// };
|
||||||
</script>
|
</script>
|
||||||
<style src="./index.scss" scoped>
|
<style src="./index.scss" scoped>
|
||||||
</style>
|
</style>
|
||||||
|
@@ -105,7 +105,7 @@ export default defineConfig(({mode}: { mode: string }): object => {
|
|||||||
assetFileNames: '[ext]/[name]-[hash].[ext]' ,// 资源文件像 字体,图片等
|
assetFileNames: '[ext]/[name]-[hash].[ext]' ,// 资源文件像 字体,图片等
|
||||||
manualChunks(id: string){
|
manualChunks(id: string){
|
||||||
if (id.includes('node_modules')) {
|
if (id.includes('node_modules')) {
|
||||||
return id.toString().split('node_modules/')[1].split('/')[0].toString();
|
return "vendor";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
35
yarn.lock
35
yarn.lock
@@ -2,6 +2,18 @@
|
|||||||
# yarn lockfile v1
|
# yarn lockfile v1
|
||||||
|
|
||||||
|
|
||||||
|
"@alova/adapter-axios@^2.0.5":
|
||||||
|
version "2.0.5"
|
||||||
|
resolved "https://registry.npmmirror.com/@alova/adapter-axios/-/adapter-axios-2.0.5.tgz#a6788e124ec74d25846519a15518902b2fa0ae1a"
|
||||||
|
integrity sha512-JTcNdg0d9nFpbwPp2RPAWGyph+HfSUQe3qCC9sg9yATGz1X2Ed0pnug1ovn1defrjWUYm+Iod2MTv1fsym5LHA==
|
||||||
|
dependencies:
|
||||||
|
"@alova/shared" "^1.0.4"
|
||||||
|
|
||||||
|
"@alova/shared@^1.0.4":
|
||||||
|
version "1.0.4"
|
||||||
|
resolved "https://registry.npmmirror.com/@alova/shared/-/shared-1.0.4.tgz#56176e6f71dbb8b8a8dec49092277c6e0705d55a"
|
||||||
|
integrity sha512-Tq47Wd5q76kPmGLXmPijb0AfsXW2aWR9Pid1KO1nz96BdWiKstx2t/ZLTNaGtQzYyB6M+puunaTTJbusJQPmkQ==
|
||||||
|
|
||||||
"@ant-design/colors@^6.0.0":
|
"@ant-design/colors@^6.0.0":
|
||||||
version "6.0.0"
|
version "6.0.0"
|
||||||
resolved "https://registry.npmmirror.com/@ant-design/colors/-/colors-6.0.0.tgz#9b9366257cffcc47db42b9d0203bb592c13c0298"
|
resolved "https://registry.npmmirror.com/@ant-design/colors/-/colors-6.0.0.tgz#9b9366257cffcc47db42b9d0203bb592c13c0298"
|
||||||
@@ -438,6 +450,11 @@
|
|||||||
dependencies:
|
dependencies:
|
||||||
undici-types "~6.13.0"
|
undici-types "~6.13.0"
|
||||||
|
|
||||||
|
"@types/nprogress@^0.2.3":
|
||||||
|
version "0.2.3"
|
||||||
|
resolved "https://registry.npmmirror.com/@types/nprogress/-/nprogress-0.2.3.tgz#b2150b054a13622fabcba12cf6f0b54c48b14287"
|
||||||
|
integrity sha512-k7kRA033QNtC+gLc4VPlfnue58CM1iQLgn1IMAU8VPHGOj7oIHPp9UlhedEnD/Gl8evoCjwkZjlBORtZ3JByUA==
|
||||||
|
|
||||||
"@typescript-eslint/eslint-plugin@8.0.1":
|
"@typescript-eslint/eslint-plugin@8.0.1":
|
||||||
version "8.0.1"
|
version "8.0.1"
|
||||||
resolved "https://registry.npmmirror.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.0.1.tgz#5dbd1b498fdea83a16d292322d27d293ce156f94"
|
resolved "https://registry.npmmirror.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.0.1.tgz#5dbd1b498fdea83a16d292322d27d293ce156f94"
|
||||||
@@ -672,6 +689,14 @@ ajv@^6.12.4:
|
|||||||
json-schema-traverse "^0.4.1"
|
json-schema-traverse "^0.4.1"
|
||||||
uri-js "^4.2.2"
|
uri-js "^4.2.2"
|
||||||
|
|
||||||
|
alova@^3.0.5:
|
||||||
|
version "3.0.5"
|
||||||
|
resolved "https://registry.npmmirror.com/alova/-/alova-3.0.5.tgz#876bd7108d5fecf19de1425e59f695f4769933fe"
|
||||||
|
integrity sha512-cOE2nTPOp7sXLhf9cthdh90lT389C1akgJULMytuFeV1loriJr1YbT3LCw3qb/P3N+o/QtJ9WLH2ccr0vJ380A==
|
||||||
|
dependencies:
|
||||||
|
"@alova/shared" "^1.0.4"
|
||||||
|
rate-limiter-flexible "^5.0.3"
|
||||||
|
|
||||||
ansi-regex@^5.0.1:
|
ansi-regex@^5.0.1:
|
||||||
version "5.0.1"
|
version "5.0.1"
|
||||||
resolved "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-5.0.1.tgz#082cb2c89c9fe8659a311a53bd6a4dc5301db304"
|
resolved "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-5.0.1.tgz#082cb2c89c9fe8659a311a53bd6a4dc5301db304"
|
||||||
@@ -2304,6 +2329,11 @@ normalize-path@^3.0.0, normalize-path@~3.0.0:
|
|||||||
resolved "https://registry.npmmirror.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
|
resolved "https://registry.npmmirror.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
|
||||||
integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
|
integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
|
||||||
|
|
||||||
|
nprogress@^0.2.0:
|
||||||
|
version "0.2.0"
|
||||||
|
resolved "https://registry.npmmirror.com/nprogress/-/nprogress-0.2.0.tgz#cb8f34c53213d895723fcbab907e9422adbcafb1"
|
||||||
|
integrity sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA==
|
||||||
|
|
||||||
nth-check@^2.0.1, nth-check@^2.1.1:
|
nth-check@^2.0.1, nth-check@^2.1.1:
|
||||||
version "2.1.1"
|
version "2.1.1"
|
||||||
resolved "https://registry.npmmirror.com/nth-check/-/nth-check-2.1.1.tgz#c9eab428effce36cd6b92c924bdb000ef1f1ed1d"
|
resolved "https://registry.npmmirror.com/nth-check/-/nth-check-2.1.1.tgz#c9eab428effce36cd6b92c924bdb000ef1f1ed1d"
|
||||||
@@ -2606,6 +2636,11 @@ randomfill@^1.0.3:
|
|||||||
randombytes "^2.0.5"
|
randombytes "^2.0.5"
|
||||||
safe-buffer "^5.1.0"
|
safe-buffer "^5.1.0"
|
||||||
|
|
||||||
|
rate-limiter-flexible@^5.0.3:
|
||||||
|
version "5.0.3"
|
||||||
|
resolved "https://registry.npmmirror.com/rate-limiter-flexible/-/rate-limiter-flexible-5.0.3.tgz#bfbfd7585e09073ebe22d177126116862b1024ae"
|
||||||
|
integrity sha512-lWx2y8NBVlTOLPyqs+6y7dxfEpT6YFqKy3MzWbCy95sTTOhOuxufP2QvRyOHpfXpB9OUJPbVLybw3z3AVAS5fA==
|
||||||
|
|
||||||
readable-stream@^2.3.8:
|
readable-stream@^2.3.8:
|
||||||
version "2.3.8"
|
version "2.3.8"
|
||||||
resolved "https://registry.npmmirror.com/readable-stream/-/readable-stream-2.3.8.tgz#91125e8042bba1b9887f49345f6277027ce8be9b"
|
resolved "https://registry.npmmirror.com/readable-stream/-/readable-stream-2.3.8.tgz#91125e8042bba1b9887f49345f6277027ce8be9b"
|
||||||
|
Reference in New Issue
Block a user