编写 loading、加密解密 发布NPM依赖包,并实施落地使用

你的 Loading

开箱即可用的 loading,
说明:vue3-loading 是一个方便在 Vue 3 项目中使用的加载指示器组件的 npm 插件。它允许您轻松地在项目中添加加载动画,提升用户体验。

目录

  • 你的 Loading
  • 🌍 安装
    • 🛹 演示地址:
    • 🛹 使用方法
    • 说明:
  • 你的 Pinia 加密插件
    • 🌍 安装
    • 🛹 使用方法
    • 🤖 加密和解密

🌍 安装

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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/39557.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C# WPF 无焦点自动获取USB 二维码扫码枪内容,包含中文

C# WPF 无焦点自动获取USB 二维码扫码枪内容&#xff0c;包含中文 前言项目背景 需要预知的知识实现方案第一步 安装键盘钩子第二步 获取输入的值第3 步 解决中文乱码问题分析解决思路工具函数 结束 前言 USB接口的扫码枪基本就相当于一个电脑外设&#xff0c;等同于一个快速输…

Oracle Data Redaction与Data Pump

如果表定义了Redaction Policy&#xff0c;导出时数据会脱敏吗&#xff1f;本文解答这个问题。 按照Oracle文档Advanced Security Guide第13章&#xff0c;13.6.5的Tutorial&#xff0c;假设表HR.jobs定义了Redaction Policy。 假设HR用户被授予了访问目录对象的权限&#xf…

Unity引擎使用InteriorCubeMap采样制作假室内效果

Unity引擎制作假室内效果 大家好&#xff0c;我是阿赵。   这次来介绍一种使用CubeMap做假室内效果的方式。这种技术名叫InteriorCubeMap&#xff0c;是UE引擎自带的节点效果。我这里是在Unity引擎里面的实现。 一、效果展示 这个假室内效果&#xff0c;要动态看才能看出效…

柏睿向量数据库Rapids VectorDB赋能企业级大模型构建及智能应用

ChatGPT的问世,在为沉寂已久的人工智能重新注入活力的同时,也把长期默默无闻的向量数据库推上舞台。今年4月以来,全球已有4家知名向量数据库公司先后获得融资,更加印证了向量数据库在AI大模型时代的价值。 什么是向量数据库? 在认识向量数据库前,先来了解一下最常见的关…

【业务功能篇62】Spring boot maven多模块打包时子模块报错问题

程序包 com.xxx.common.utils不存在或者xxx找不到符号 我们项目中一般都是会分成多个module模块&#xff0c;做到解耦&#xff0c;方便后续做微服务拆分模块&#xff0c;可以直接就每个模块进行打包拎出来执行部署这样就会有模块之间的调用&#xff0c;比如API模块会被Service…

【SpringBoot】SpringBoot获取不到用户真实IP怎么办

文章目录 前言问题原因解决方案修改Nginx配置文件SpringBoot代码实现 前言 项目部署后发现服务端无法获取到客户端真实的IP地址&#xff0c;这是怎么回事呢&#xff1f;给我都整懵逼了&#xff0c;经过短暂的思考&#xff0c;我发现了问题的真凶&#xff0c;那就是我们使用了N…

Vue基础

Vue基础 Vue应用 <!DOCTYPE html> <html> <head><meta charset"utf-8"><title></title><!-- 开发环境版本 --><script src"https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head&g…

vue所有UI库通用)tree-select 下拉多选(设置 maxTagPlaceholder 隐藏 tag 时显示的内容,支持鼠标悬浮展示更多

如果可以实现记得点赞分享&#xff0c;谢谢老铁&#xff5e; 1.需求描述 引用的下拉树形结构支持多选&#xff0c;限制选中tag的个数&#xff0c;且超过制定个数&#xff0c;鼠标悬浮展示更多已选中。 2.先看下效果图 3.实现思路 首先根据API文档&#xff0c;先设置maxTagC…

【Docker】Docker network之bridge、host、none、container以及自定义网络的详细讲解

&#x1f680;欢迎来到本文&#x1f680; &#x1f349;个人简介&#xff1a;陈童学哦&#xff0c;目前学习C/C、算法、Python、Java等方向&#xff0c;一个正在慢慢前行的普通人。 &#x1f3c0;系列专栏&#xff1a;陈童学的日记 &#x1f4a1;其他专栏&#xff1a;CSTL&…

TCP/IP网络江湖初探:物理层的奥秘与传承(物理层上篇-基础与本质)

〇、引言 在这个数字时代,计算机网络如同广袤的江湖,数据在其中畅游,信息传递成为了生活的常态。然而,在这个充满虚拟奇观的网络江湖中,隐藏着一个不容忽视的存在,那就是物理层,这个江湖的基石。就如同江湖中的土地一样,物理层作为计算机网络的基础,承载着数据的最初转…

STM32 CubeMX (uart_IAP串口)简单示例

STM32 CubeMX STM32 CubeMX &#xff08;串口IAP&#xff09; STM32 CubeMXIAP有什么用&#xff1f;整体思路 一、STM32 CubeMX 设置时钟树UART使能UART初始化设置 二、代码部分文件移植![在这里插入图片描述](https://img-blog.csdnimg.cn/0c4841d8328b4169a8833f15fe3d670c.p…

PHP Smarty中的缓存如何实现?

欢迎来到PHP Smarty的缓存世界&#xff01;这里是一个简单的指南&#xff0c;帮助你理解如何在这个强大的模板引擎中启用和配置缓存。 首先&#xff0c;让我们先了解一下什么是缓存。简单来说&#xff0c;缓存就是将需要花费大量时间处理的数据或资源存储起来&#xff0c;以便…

2023/8/16总结

这几天完成了私信的功能点&#xff0c;用websocket做的。 这是大概的界面&#xff0c;参考的是微信 用户可以搜索好友&#xff1a; 如果不存在是下面这样&#xff0c;存在就会在左边的聊天里面显示有这个人选项 发送消息 接下来需要把推荐算法给做了

文件IO编程 1 2

头文件包含路径 linux 操作系统分为两大空间&#xff1a;用户空间和内核空间 这样划分&#xff0c;是为了保护内核的核心组件&#xff0c;不被轻易访问和修改 系统调用&#xff1a;安全的访问内核空间 其核心是&#xff1a;函数API&#xff08;API&#xff1a;用户编程接口&…

svn文章五:问题排查与修复 - 出了问题怎么办?SVN故障排除与修复指南

文章五&#xff1a;问题排查与修复 - “出了问题怎么办&#xff1f;SVN故障排除与修复指南” 概述&#xff1a;在使用SVN时&#xff0c;难免会遇到一些问题和错误。在这篇文章中&#xff0c;我们将教您如何进行故障排查和修复&#xff0c;保护您的SVN仓库和数据安全。 1. 引言…

K8S系列文章之 Docker安装使用Kafka

通过Docker拉取镜像的方式进行安装 照例先去DockerHub找一下镜像源&#xff0c;看下官方提供的基本操作&#xff08;大部分时候官方教程比网上的要清晰一些&#xff0c;并且大部分教程可能也是翻译的官方的操作步骤&#xff0c;所以直接看官方的就行&#xff09; 老实说Kafka…

“深入剖析JVM内部原理:解密Java虚拟机的奥秘“

标题&#xff1a;深入剖析JVM内部原理&#xff1a;解密Java虚拟机的奥秘 摘要&#xff1a;本文将深入探讨Java虚拟机&#xff08;JVM&#xff09;的内部原理&#xff0c;包括其架构、内存管理、垃圾回收机制、即时编译器等关键组成部分。通过解密JVM的奥秘&#xff0c;我们将更…

【Vue3】Vue3 UI 框架 | Element Plus —— 创建并优化表单

安装 # NPM $ npm install element-plus --save // 或者&#xff08;下载慢切换国内镜像&#xff09; $ npm install element-plus -S// 可以选择性安装 less npm install less less-loader -D // 可以选择性配置 自动联想src目录Element Plus 的引入和注入 main.ts import…

解决VSCode CPU高占问题的方法

如果你也遇到VSCode的CPU占用过高的问题&#xff0c;可以尝试使用官方自带的插件Bisect&#xff08;扩展二分查找&#xff09;功能来查找具体是哪个扩展出了问题。 找到“糟糕”的扩展可能很容易&#xff0c;也可能很困难。 打开扩展视图 ( CtrlShiftX )&#xff0c;禁用扩展&…

网络:杂记

1. 完成链路认证后&#xff0c;STA会继续发起链路服务协商&#xff0c;具体的协商是通过Association报文实现。 2. RSTP可以提高收敛速度的原因&#xff1a; RSTP的拓扑变化机制 Proposal/Agreement机制 根端口快速切换机制 边缘端口的引入