首页 > 其他分享 >在 vue项目使用base64加密

在 vue项目使用base64加密

时间:2022-09-19 20:37:59浏览次数:70  
标签:vue 加密 String base64 utftext output var input fromCharCode

原文链接:https://blog.csdn.net/m0_49016709/article/details/111475416

1、vue-cli 脚手架搭建前端项目中,使用base64加密传输数据
方法一
1.安装依赖

npm install --save js-base64
1
2.在main.js中引入

import Base64 from 'js-base64'
Vue.use(Base64)
1
2
3、使用

Base64.encode(this.pwd);//加密
Base64.decode(this.pwd);//解密
1
2
方法二
在utils 文件夹下创建base64.js,写入下面代码

//1.加密解密方法使用:

//1.加密
// var str = '124中文内容';
// var base = new Base64();
// var result = base.encode(str);
// //document.write(result);

// //2.解密
// var result2 = base.decode(result);
// document.write(result2);
// //2.加密、解密算法封装:

function Base64() {

// private property
var _keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";

// public method for encoding
this.encode = function (input) {
if(!input){ console.log('请传入要加密的值') return}
var output = "";
var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
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 decoding
this.decode = function (input) {
if(!input){ console.log('请传入要解密的值') return}
var output = "";
var chr1, chr2, chr3;
var enc1, enc2, enc3, enc4;
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 encoding
var _utf8_encode = function (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 decoding
var _utf8_decode = function (utftext) {
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
组件中使用

import base from '@/utils/base64' //引入

var base1 = new base();
var passWord=base1.encode(this.form.password) //加密

标签:vue,加密,String,base64,utftext,output,var,input,fromCharCode
From: https://www.cnblogs.com/fswhq/p/16706513.html

相关文章

  • JS---初步使用Vue
    二。使用vue 1.想使用vue,必须创建一个vue实例,且要传入一个配置对象 2.root容器里的代码依然符合html中规范 3.root容器里的代码被称为【vue模板】 --><body> <div......
  • 基础vue的一些知识补充
    一、:disabled该属性能接受布尔值,可以用于元素的使用。当值为true时,该元素将无法被使用,如button的disabled属性被设置为true后,将无法被点击,input的disabled属性被......
  • vue中上传excel文件的方法
    1.使用方法 <inputtype="file"@change="importExcel">或者使用element-ui<el-uploadref="input"action="/":show-file-list="false":auto-upload="false":on......
  • 【Vue项目实践】vue 创建一个新项目
    参考链接:Vite+Electron快速构建一个VUE3桌面应用(一)创建一个Vite项目安装vite并创建项目,输入项目名,模板采用vue,其他的根据情况,可以先全部Noyarncreatevite......
  • vue3组件的几种引入、注册、自动注册等
    全局组件的注册和引入全局组件注册components/index.js【方式一:先引入后注册】importBgImagefrom"@/components/global/web-background/bg-image.vue";importBa......
  • 2022-09-19 Error: Cannot find module '项目\node_modules\@vue\cli-service\bin
    前言:wepy项目迁移uniapp使用wepy-to-uniapp转换代码后初始化依赖抛出的错误:Error:Cannotfindmodule'项目\node_modules\@vue\cli-service\bin\vue-cli-service.js'网......
  • vue3中vuex使用实例
    通过脚手架创建项目会自动创建store/index.js1.vuex基本结构import{createStore}from'vuex'exportdefaultcreateStore({//全局的状态初始值state:{},......
  • Vue3中使用ref获取元素节点
    本文介绍在vue3的setup中使用compositionAPI获取元素节点的几种方法:静态绑定仅仅需要申明一个ref的引用,用来保存元素,在template中,不必bind引用(:ref="domRef"),只需要声......
  • vue中防抖函数的写法以及用法
    1.准备好防抖函数functiondebounce(func,wait){lettimeout;returnfunction(...args){if(timeout)clearTimeout(timeout);l......
  • vue-baidu-map 搜索定位
    1、引入vue-baidu-map插件npminstallvue-bai-map--save2、注册(我这里是采用全局注册main.js)ak是你自己申请的3、html4、数据定义5、JS......