vue 项目中实现base64 加密 、解密

第一种方式,直接使用插件 js-base64

1、安装插件

npm install --save js-base64

2、插件引用

import { Base64 } from 'js-base64'

3、加密、解密

const encodePwd = Base64.encode(password);//加密
const decodePwd = Base64.decode(encodePwd);//解密

第二种,封装引入

1、utils 中创建文件 base64.jsbase64.js中代码如下

//加密、解密算法封装:
function Base64(this: any) {// private propertyvar _keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";// public method for encodingthis.encode = function (input: string) {if (!input) { console.log('请传入要加密的值'); return }var output = "";var chr1: number, chr2: number, chr3: number, enc1: number, enc2: number, enc3: number, enc4: number;var i = 0;input = _utf8_encode(input);while (i < input.length) {chr1 = input.charCodeAt(i++);chr2 = input.charCodeAt(i++);chr3 = input.charCodeAt(i++);enc1 = chr1 >> 2;enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);enc4 = chr3 & 63;if (isNaN(chr2)) {enc3 = enc4 = 64;} else if (isNaN(chr3)) {enc4 = 64;}output = output +_keyStr.charAt(enc1) + _keyStr.charAt(enc2) +_keyStr.charAt(enc3) + _keyStr.charAt(enc4);}return output;}// public method for decodingthis.decode = function (input: string) {if (!input) { console.log('请传入要解密的值'); return }var output = "";var chr1: number, chr2: number, chr3: number;var enc1: number, enc2: number, enc3: number, enc4: number;var i = 0;input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");while (i < input.length) {enc1 = _keyStr.indexOf(input.charAt(i++));enc2 = _keyStr.indexOf(input.charAt(i++));enc3 = _keyStr.indexOf(input.charAt(i++));enc4 = _keyStr.indexOf(input.charAt(i++));chr1 = (enc1 << 2) | (enc2 >> 4);chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);chr3 = ((enc3 & 3) << 6) | enc4;output = output + String.fromCharCode(chr1);if (enc3 != 64) {output = output + String.fromCharCode(chr2);}if (enc4 != 64) {output = output + String.fromCharCode(chr3);}}output = _utf8_decode(output);return output;}// private method for UTF-8 encodingvar _utf8_encode = function (string: string) {string = string.replace(/\r\n/g, "\n");var utftext = "";for (var n = 0; n < string.length; n++) {var c = string.charCodeAt(n);if (c < 128) {utftext += String.fromCharCode(c);} else if ((c > 127) && (c < 2048)) {utftext += String.fromCharCode((c >> 6) | 192);utftext += String.fromCharCode((c & 63) | 128);} else {utftext += String.fromCharCode((c >> 12) | 224);utftext += String.fromCharCode(((c >> 6) & 63) | 128);utftext += String.fromCharCode((c & 63) | 128);}}return utftext;}// private method for UTF-8 decodingvar _utf8_decode = function (utftext: string) {var string = "";var i = 0;let c = 0, c1 = 0, c2 = 0;while (i < utftext.length) {c = utftext.charCodeAt(i);if (c < 128) {string += String.fromCharCode(c);i++;} else if ((c > 191) && (c < 224)) {c2 = utftext.charCodeAt(i + 1);string += String.fromCharCode(((c & 31) << 6) | (c2 & 63));i += 2;} else {c2 = utftext.charCodeAt(i + 1);c1 = utftext.charCodeAt(i + 2);string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c1 & 63));i += 3;}}return string;}
}
export default Base64

2、引用封装的 js

import { Base64 } from '@/utils/base64'

3、加密、解密

const encodePwd = Base64.encode(password);//加密
const decodePwd = Base64.decode(encodePwd);//解密

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

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

相关文章

信息学奥赛一本通2061:【例1.2】梯形面积

2061&#xff1a;【例1.2】梯形面积 时间限制: 1000 ms 内存限制: 65536 KB 提交数: 172550 通过数: 68183 【题目描述】 在梯形中阴影部分面积是150平方厘米&#xff0c;求梯形面积。 【输入】 (无&#xff09; 【输出】 输出梯形面积&#xff08;保留两位小数&a…

HarmonyOS开发:NodeJs脚本实现组件化动态切换

前言 上篇文章&#xff0c;我们使用NodeJs脚本完成了HarmonyOS项目的组件化运行&#xff0c;但是由于脚本是基于4.0.0.400版本的DevEco Studio开发的&#xff0c;可能在配置文件的修改上有些许差距&#xff0c;那么遇到这种情况怎么办&#xff0c;一种是再写一套针对性的脚本文…

【Oracle】[INS-30131]执行安装程序验证所需的初始设置失败。

这里写目录标题 一、问题描述1 报错内容1.1 无法从节点“kotin”检索 exectask 的版本1.2 工作目录"xxx"无法在节点"kotin"上使用 2 相关环境2.1 安装软件2.2 安装系统 3 解决思路分析 二、解决方案1 方案一、 满足验证条件 - 不换系统1.1 第一步、检查文件…

笔记 | MySQL 运维常用语句

1.导出整个库 mysqldump -u 用户名 -p –default-character-setlatin1 数据库名 > 导出的文件名(数据库默认编码是latin1) mysqldump -u wcnc -p smgp_apps_wcnc > wcnc.sql2.导出一个表 mysqldump -u 用户名 -p 数据库名 表名> 导出的文件名 mysqldump -u wcnc…

p5.js 到底怎么设置背景图?

本文简介 点赞 关注 收藏 学会了 在 《p5.js 光速入门》 里我们学过加载图片元素&#xff0c;学过过背景色的用法&#xff0c;但当时没提到背景图要怎么使用。 本文就把背景图这部分内容补充完整&#xff0c;并且会提到在 p5.js 里使用背景图的一些注意点。 背景图的用法…

Oracle数据库基础

一、Oracle数据库介绍: Oracle数据库是由Oracle公司开发的关系型数据库管理系统(RDBMS),它是世界上最流行和广泛使用的商业数据库之一。Oracle数据库提供了可靠、高性能和安全的数据管理解决方案,被广泛应用于企业级应用程序和大型数据中心。 二、Oracle数据库各个版本的…

在虚拟环境中,通过pip安装tensorflow

目录 激活python虚拟环境&#xff0c;更新pip 通过pip 安装tensorflow 确定python版本&#xff1a; ​编辑安装tensorflow: ​编辑 为什么使用pip安装tensorflow? 激活python虚拟环境&#xff0c;更新pip 命令为python -m pip install --upgrade pip 通过pip 安装tensorf…

C语言之结构体和共用体详解

目录 结构体 结构体的定义和使用 结构体数组的使用 结构体指针的使用 结构体大小的计算 共用体 共用体的定义和使用 typedef用法详解 enum枚举类型 结构体 结构体的定义和使用 C语言的结构体&#xff08;Struct&#xff09;是一种自定义的数据类型&#xff0c;它允许…

时间、空间复杂度的例题详解

文章前言 上篇文章带大家认识了数据结构和算法的含义&#xff0c;以及理解了时间、空间复杂度&#xff0c;那么接下来来深入理解一下时间、空间复杂度。 时间复杂度实例 实例1 // 计算Func2的时间复杂度&#xff1f; void Func2(int N) {int count 0;for (int k 0; k <…

数据结构与算法之排序: 堆排序 (Javascript版)

排序 排序&#xff1a;把某个乱序的数组变成升序或降序的数组 (这里用数组来做举例) 堆排序 该排序属于 Selectionsort 选择排序的优化版本由于堆排序的查找过程从O(n)优化为O(logn)整体的排序时间复杂度为 O(nlogn)&#xff0c;这是排序算法中的最优解&#xff01;&#xf…

图的应用4.0-----关键路径(AOE网)

目录 前言 AOE网 1.基本概念 2.应用 关键路径 1.算法理论 2.代码实现&#xff08;C/C&#xff09; 前言 前面学习了图AOV网的应用&#xff0c;即拓扑排序&#xff0c;那这一期我们学习AOE网的应用&#xff0c;这是一个图的一个很广泛问题&#xff0c;也就是关键路径。那…

apisix之插件开发,包含java和lua两种方式

https://download.csdn.net/download/tiantangpw/88475630 有ppt和springboot程序包,可以运行

HCIA --- ACL(访问控制列表)

ACL访问控制列表 一、作用 访问控制 --- 在路由器流量进或出的接口上&#xff0c;匹配流量产生动作---允许、拒绝定义感兴趣流量 --- 抓取流量&#xff0c;之后给到其他的策略&#xff0c;让其他策略进行工作&#xff1b; 二、匹配规则 至上而下逐一匹配&#xff0c;上条匹…

linux查看硬件信息命令

文章目录 cpu内核版本内存硬盘主板服务器参考链接 cpu cat /proc/cpuinfo 一个物理CPU可以有1个或者多个物理内核&#xff0c;一个物理内核可以作为1个或者2个逻辑CPU。 物理CPU数就是主板上实际插入的CPU数量。 在Linux上cat /proc/cpuinfo&#xff0c;会打印每个cpu的信息 …

k8s中kubectl陈述式资源管理

目录 1、 理论 1.1、 管理k8s核心资源的三种基本方法 &#xff1a; 1.1.1陈述式的资源管理方法&#xff1a; 1.1.1.1、优点&#xff1a; 1.1.1.2、缺点&#xff1a; 1.1.2、声明式资源管理方法 1.1.3、GUI式资源管理方法 1.2、陈述式资源管理方法 2. 对资源的增、删、…

[推荐]Linux安装与配置虚拟机之虚拟机服务器坏境配置

&#x1f3ac; 艳艳耶✌️&#xff1a;个人主页 &#x1f525; 个人专栏 &#xff1a;《Spring与Mybatis集成整合》《Vue.js使用》 ⛺️ 越努力 &#xff0c;越幸运。 一.操作系统 1. 简介 操作系统&#xff08;perating System&#xff0c;简称OS&#xff09;是一种系统软件…

SQL server数据库单用户模式如何退出

根据网上的说法&#xff0c;用下面的方式尝试即可退出 进入ssms数据库管理软件执行下面的sql语句 -- 第一步执行USE [master] GO SET ANSI_NULLS ON GO SET QUOTED_IDENTIFIER ON GO--建一个存储过程&#xff0c;断开所有用户连接。 create proc [dbo].[killspid] (dbn…

决定放弃uniapp开发了,因为它实在是没有taro友好

被uniapp折腾了两天&#xff0c;实在是受不了它对vue3的支持和react的支持&#xff0c;可以这么说&#xff0c;uniapp完全没有支持vue3和react&#xff0c;这么说我觉得一点也不过分。相对于折腾了两天uniapp来讲&#xff0c;我使用taro只花了1个小时不到&#xff0c;就可以完美…

【java学习—八】单例设计模式(5)

文章目录 1. 相关概念2. 单例设计模式-饿汉式3. 单例设计模式-懒汉式4. 总结 1. 相关概念 单例&#xff1a;只有一个实例&#xff08;实例化对象&#xff09; 设计模式是在大量的实践中总结和理论化之后优选的代码结构、编程风格、以及解决问题的思考方式。设计模式就像是经典的…

【鸿蒙软件开发】ArkTS通用事件

文章目录 前言一、点击事件1.1 基础介绍1.2 ClickEvent对象说明1.3 示例代码 二、触摸事件2.1 基础介绍2.2 ClickEvent对象说明2.3 示例代码 二、焦点事件2.2 基础介绍3.2 示例代码 总结 前言 在我们的ArkTS中有一些通用的事件&#xff0c;他们在所有的组件中都可以用&#xf…