你的 Loading

開箱即可用的 loading，
說明：vue3-loading 是一個方便在 Vue 3 項目中使用的加載指示器組件的 npm 插件。它允許您輕松地在項目中添加加載動畫，提升用戶體驗。

🌍 安裝

npm install vue3-loading-plug

🛹 演示地址：

http://project.webcats.cn/bx/43924/16191

🛹 使用方法

說明：

內置兩種loading 【可自行配置】

? Loading 是 大loading 可以用于刷新項目頁面、路由跳轉 。在路由中引入一次 即可全局生效，極簡配置

? smallLoading 是小圓圈 loading，一般用于接口請求展示。可以請求攔截器中開啟，全局接口生效，極簡配置

在你的主應用程序入口文件（例如 main.js）中，導入并使用 loading ：

import Loading from "vue3-loading-plug";
app.use(Loading).mount("#app");

如果是 ts 請在 global.d.ts 加入 類型

declare module "vue3-loading-plug";

router

router.beforeEach((to, from, next) => {if (to.meta.loading) app.config.globalProperties.$Loading.showLoading();next();
});router.afterEach((to) => {if (to.meta.loading) app.config.globalProperties.$Loading.hideLoading();
});

scrvies

// 請求攔截器
service.interceptors.request.use((config) => {// 在發送請求之前做些什么？app.config.globalProperties.$smallLoading.showLoading();return config;},(error) => {// 對請求錯誤做些什么？app.config.globalProperties.$smallLoading.hideLoading();return Promise.reject(error);}
);// 封裝錯誤提示函數 （Token過期、網絡鏈接錯誤等）
const tipError = (value: string, title: string) => {ElMessageBox.alert(value, title, {confirmButtonText: "重新登錄",type: "warning",}).then(() => {// Session.clear(); // 清除臨時緩存// 清除cookiedocument.cookie.split(";").forEach(fnction (c) {document.cookie = c.replace(/^ +/, "").replace(/=.*/, "=;expires=" + new Date().toUTCString() + ";path=/");});window.location.reload(); // 刷新頁面});
};// 響應攔截器
service.interceptors.response.use((response) => {// 對響應數據做點什么？ 這里只返回成功響應數據！app.config.globalProperties.$smallLoading.hideLoading();return response.data;},(error) => {// 對響應錯誤數據做點什么？這里只顯示錯誤消息！app.config.globalProperties.$smallLoading.hideLoading();/* axios.isCancel(error) 是 Axios 庫中的一個方法，用于判斷一個錯誤對象是否是由于請求取消導致的。當使用 axios.CancelToken 取消請求時，會拋出一個帶有一個 message 屬性的錯誤對象。axios.isCancel(error) 的作用就是判斷這個錯誤對象的類型，如果是由請求取消導致的錯誤，則返回 true，否則返回 false。console.log('打印cancelToken.cancel('xxx')傳入來的值', error.message);*/if (axios.isCancel(error)) {ElMessage.error(error.message); // 顯示錯誤消息} else {// 不是由請求取消導致的錯誤let errorMessage; // 錯誤提示變量const statusData = error.response?.data; // 錯誤data數據const describeForNameMap = [[() => error.message.indexOf("timeout") !== -1,() => (errorMessage = "網絡超時 🤖"),],[() => error.message === "Network Error",() => (errorMessage = "網絡連接錯誤 🤪"),],[() => statusData.code === 100010011,() => {// 100010011 token過期errorMessage = statusData.message;tipError(errorMessage, "登錄過期");},],// 否則 顯示錯誤消息[() => statusData, () => (errorMessage = statusData.message)],];// 獲取符合條件的子數組const getDescribe = describeForNameMap.find((item) => item[0]());// 執行子數組中的函數getDescribe && getDescribe[1]();ElMessage.error(errorMessage); // 顯示錯誤消息}}
);// 導出 service將其命名為axios , 同時還導出了一個名為cancelToken的變量（取消請求）
export { service as axios, cancelToken };

你的 Pinia 加密插件

你的 Pinia 加密插件是一個基于 Pinia 的實用工具，用于在 Vue.js 應用程序中加密和解密敏感數據。它提供了一種簡單且安全的方式來保護你的數據。

🌍 安裝

你可以使用 npm 或 yarn 安裝插件：

pnpm i vue3-encryption-plugin

🛹 使用方法

在你的主應用程序入口文件（例如 main.js）中，導入并使用 Pinia store 以及加密插件：

// main.js
import { createApp } from "vue";
import { createPinia } from "pinia";
import App from "./App.vue";
import EncryptionPlugin from "vue3-encryption-plugin";const app = createApp(App);const pinia = createPinia();
app.use(pinia);// 注冊加密插件并提供自定義的密鑰（可選）例如，隨機的字符串
app.use(EncryptionPlugin, { key: "your-custom-secret-key" });app.mount("#app");

🤖 加密和解密

一旦你設置了插件，你就可以在組件中使用 $encrypt 和 $decrypt 方法：

第一種： getCurrentInstance()

<!-- YourComponent.vue -->import {  getCurrentInstance } from 'vue';setup(){// 獲取當前組件的上下文，下面兩種方式都能獲取到組件的上下文。const { ctx }  = getCurrentInstance();  //  方式一，這種方式只能在開發環境下使用，生產環境 下的ctx將訪問不到const { proxy }: any = getCurrentInstance();  //  方式二，此方法在開發環境以及生產環境下都能到組件上下文對象（推薦）// ctx 中包含了組件中由ref和reactive創建的響應式數據對象,以及以下對象及方法;proxy.$attrsproxy.$dataproxy.$elproxy.$emitproxy.$forceUpdateproxy.$nextTickproxy.$optionsproxy.$parentproxy.$propsproxy.$refsproxy.$rootproxy.$slotsproxy.$watch}function handClick() {console.log("！這里輸出 🚀 ==>：",proxy.$encryptionPlugin.encryptData({ name: "zk", age: 26}));console.log("！這里輸出 🚀 ==>：",proxy.$encryptionPlugin.decryptData("U2FsdGVkX1/PBDHn2pyLPAf6DmolvylM2QEIDhcf5I3WQWhOh19eos0uZfdbzdDP"));
}

第二種 injict (推薦)

1：src / types / global.d.ts 定義類型

// 加密解密
declare interface EncryptionPlugin {encryptData: <T>(data: T) => string;decryptData: <T>(encryptedData: string) => T;
}

如果你使用 eslint 請在 .eslintrc.cjs 文件中添加

	globals: {// 以下是全局變量 eslint 不會報'EncryptionPlugin' is not defined.eslint （no-undef）EncryptionPlugin: "readonly",$encryptionPlugin: "readonly",},

2： 頁面使用

<script setup lang="ts">
import { inject } from 'vue';// 使用 inject 函數獲取 encryptionPlugin
const encryptionPlugin = inject("encryptionPlugin") as EncryptionPlugin;function handClick() {// 現在你可以在你的組件中使用 encryptData 和 decryptData 方法了const encryptedData = encryptionPlugin.encryptData("Hello World");const decryptedData = encryptionPlugin.decryptData(encryptedData);console.log("加密 🚀 ==>：", encryptedData);console.log("解密 🚀 ==>：", decryptedData);
}
</script>