编写 loading、加密解密发布NPM依赖包，并实施落地使用-Toy模板网

这篇具有很好参考价值的文章主要介绍了编写 loading、加密解密发布NPM依赖包，并实施落地使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

你的 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(); // 清除临时缓存
    // 清除cookie
    document.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.$attrs
     proxy.$data
     proxy.$el
     proxy.$emit
     proxy.$forceUpdate
     proxy.$nextTick
     proxy.$options
     proxy.$parent
     proxy.$props
     proxy.$refs
     proxy.$root
     proxy.$slots
     proxy.$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：页面使用文章来源地址https://www.toymoban.com/news/detail-651630.html

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