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

左手倒影ZY 2022-12-12 我要评论

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);