vue3-encryption-plugin - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

package.json

		{
		"name": "vue3-encryption-plugin",
		"version": "1.0.0",
		"version": "1.0.1",
		"description": "pinia插件加密、实现本地数据加密解密",
		@@ -5,0 +5,0 @@ "main": "src/index.js",

README.md

		@@ -1,6 +0,6 @@
		# 你的 Pinia 加密插件
		# 你的 Pinia 加密插件

		> 你的 Pinia 加密插件是一个基于 Pinia 的实用工具，用于在 Vue.js 应用程序中加密和解密敏感数据。它提供了一种简单且安全的方式来保护你的数据。

		## 安装
		## 🌍 安装

		@@ -13,3 +13,3 @@ 你可以使用 npm 或 yarn 安装插件：

		## 使用方法
		## 🛹 使用方法

		@@ -30,3 +30,3 @@ 在你的主应用程序入口文件（例如 main.js）中，导入并使用 Pinia store 以及加密插件：

		// 注册加密插件并提供自定义的密钥（可选）
		// 注册加密插件并提供自定义的密钥（可选）例如，随机的字符串
		app.use(EncryptionPlugin, { key: "your-custom-secret-key" });
		@@ -37,16 +37,40 @@

		加密和解密
		## 🤖 加密和解密

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

		> 第一种： getCurrentInstance()

		```javascript
		<!-- YourComponent.vue -->
		import { onMounted, ref, getCurrentInstance } from "vue";
		const { proxy }: any = getCurrentInstance();
		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.$encrypt({ name: "zk", age: "25" }));
		console.log(
		"！这里输出 🚀 ==>：",
		proxy.$decrypt(
		"U2FsdGVkX19kB72fxBYMht5yxXk0MHaYk4qCymMRh7uEA7lb6qOLVInVvTpyNIN0"
		proxy.$encryptionPlugin.encryptData({ name: "zk", age: 26})
		);
		console.log(
		"！这里输出 🚀 ==>：",
		proxy.$encryptionPlugin.decryptData(
		"U2FsdGVkX1/PBDHn2pyLPAf6DmolvylM2QEIDhcf5I3WQWhOh19eos0uZfdbzdDP"
		)
		@@ -56,1 +80,43 @@ );
		```

		> 第二种 injict (推荐)

		1：src / types / global.d.ts 定义类型

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

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

		```javascript
		globals: {
		// 以下是全局变量 eslint 不会报'EncryptionPlugin' is not defined.eslint （no-undef）
		EncryptionPlugin: "readonly",
		$encryptionPlugin: "readonly",
		},
		```

		2：页面使用

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

src/index.js

		@@ -1,40 +0,34 @@
		// 导入所需的加密库
		import { createPinia } from "pinia";
		import CryptoJS from "crypto-js";
		import { provide } from "vue";
		const pinia = createPinia();
		// 加密函数
		const encryptData = (data, key) => {
		const encryptedData = CryptoJS.AES.encrypt(
		JSON.stringify(data),
		key
		).toString();
		return encryptedData;
		};

		// 定义插件接口
		// 解密函数
		const decryptData = (encryptedData, key) => {
		const decryptedBytes = CryptoJS.AES.decrypt(encryptedData, key);
		const decryptedData = JSON.parse(decryptedBytes.toString(CryptoJS.enc.Utf8));
		return decryptedData;
		};

		const EncryptionPlugin = {
		install: (app, options) => {
		// 加密密钥，默认使用一个固定值，你可以根据实际情况进行配置
		const key = options && options.key ? options.key : "my-secret-key";

		// 加密函数
		const encryptData = (data) => {
		const encryptedData = CryptoJS.AES.encrypt(
		JSON.stringify(data),
		key
		).toString();
		return encryptedData;
		install: (app, { key = "my-secret-key" } = {}) => {
		// 为组件提供插件
		app.provide("encryptionPlugin", {
		encryptData: (data) => encryptData(data, key),
		decryptData: (data) => decryptData(data, key),
		});
		app.config.globalProperties.$encryptionPlugin = {
		encryptData: (data) => encryptData(data, key),
		decryptData: (data) => decryptData(data, key),
		};

		// 解密函数
		const decryptData = (encryptedData) => {
		const decryptedBytes = CryptoJS.AES.decrypt(encryptedData, key);
		const decryptedData = JSON.parse(
		decryptedBytes.toString(CryptoJS.enc.Utf8)
		);
		return decryptedData;
		};

		// 将加密函数和解密函数添加到 Pinia 实例中
		app.config.globalProperties.$encrypt = encryptData;
		app.config.globalProperties.$decrypt = decryptData;
		// 在 setup 中将插件注册为 provide/inject 提供的全局方法
		provide("encryptionPlugin", {
		encryptData,
		decryptData,
		});
		},
		};

		export default EncryptionPlugin;
		export { pinia, EncryptionPlugin };

vue3-encryption-plugin - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics

Worsened metrics