首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue 路由传参加密

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

2022-12-12 17:04:56 作者：左手倒影ZY

这篇文章主要介绍了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);

到此这篇关于Vue 路由传参加密的文章就介绍到这了,更多相关Vue 路由传参加密内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

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