Vue 路由传参加密的示例代码

Vue 路由传参加密

首先，创建一个base64.js

const Base64 = {
  //加密
   encode(str) {
       return btoa(encodeURIComponent(str).replace(/％([0-9A-F]{2})/g,
           function toSolidBytes(match, p1) {
               return String.fromCharCode('0x' + p1);
           }));
   },
 //解密
   decode(str) {
       // Going backwards: from bytestream, to percent-encoding, to original string.
       return decodeURIComponent(atob(str).split('').map(function (c) {
           return '％' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
       }).join(''));
   }
}
export default Base64

在main.js里面引用

import Base64 from './assets/js/base64.js'

Vue.prototype.$Base64 = Base64;

使用页面：

this.$router.push({
 path: "/user/Recommend",
 query:{
   info:this.$Base64.encode(XXXXX)//this.$Base64.encode(JSON.stringify(row))
 }
}）;

接受参数页面：

let params = JSON.parse(this.$Base64.decode(this.$route.query.info))

Vue项目：路由跳转时中文传参被URL编码，怎么解决？用js封装Base64编码解码加密解密

1.在utils中封装js方法，代码如下：

var Base64 = {

   // private property
   _keyStr: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=", //密钥（不能修改）

// public method for encoding
   encode: function(input) {
   var output = "";
   var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
   var i = 0;

input = Base64._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 + this._keyStr.charAt(enc1) + this._keyStr.charAt(enc2) + this._keyStr.charAt(enc3) + this._keyStr.charAt(enc4);

}

return output;
   },

// public method for decoding
   decode: function(input) {
   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 = this._keyStr.indexOf(input.charAt(i++));
   enc2 = this._keyStr.indexOf(input.charAt(i++));
   enc3 = this._keyStr.indexOf(input.charAt(i++));
   enc4 = this._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 = Base64._utf8_decode(output);

return output;

},

// private method for UTF-8 encoding
   _utf8_encode: function(string) {
   string = string.replace(/ /g, " ");
   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
   _utf8_decode: function(utftext) {
   var string = "";
   var i = 0;
   var c,c1,c2,c3 = 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);
   c3 = utftext.charCodeAt(i + 2);
   string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63));
   i += 3;
   }

}

return string;
   }

}

   export default Base64

2.在main.js中引入并挂载到vue原型对象上

//Base64加密
import Base64 from '@/utils/base64.js'
Vue.prototype.$Base64 = Base64

3.在vue文件中使用

this.$Base64.encode(str) //加密
this.$Base64.decode(str) //解密

拓展：编码解码的其他方式

1.md5

常用于加密，可以暴力反向破解但是难度很大，一般来说，对md5加密的要求是现代算力最高的计算机需要花百年才能进行解密

2.window对象自带的编码解码

window.btoa(str) //对str进行编码

binary to ascii，用于将ascii字符串或二进制数据转换成一个base64编码过的字符串表示，即Base64的编码过程，常用于编码字符串。btoa不能编辑Unicode字符

window.atob(str) //对str进行解码

ascii to binary，用于解码一个已经被base-64编码过的数据，即解码Base64编码的字符串。

3.Unicode字符编码

encodeURI(str) //将URL地址编码转变成ASCII字符序列
decodeURI(str) //将ASCII字符序列解码转变成UTL地址
encodeURIComponent(str) //将中文字符编码转变成ASCII字符序列
decodeURIComponent(str) //将ASCII字符序列解码转变成中文字符

4.使用JS函数的escape()和unescape()

var escape1 =escape("我的名字是：");//编码
     console.log(escape1);
     var unescape1 = unescape(escape1); //解码
     console.log(unescape1);

来源：https://www.cnblogs.com/ZYSZBD/p/16976551.html