Base64工具类:将前端vue与后台SpringBoot传输的参数进行加密和解密

摘要:
=out.length){thrownewError;}returnout;}}2.使用工具类对接收到参数进行解密:Stringpassword=Base64Util.decode;

一、前端加密

1.引入base64依赖:

cnpm install --save js-base64

Base64工具类:将前端vue与后台SpringBoot传输的参数进行加密和解密第1张

2.使用base4对参数进行加密:

let Base64 = require('js-base64').Base64
//加密方法
let password =Base64.encode(password);//解密方法
//let password = Base64.decode(password);

二、后台解密

1.添加Base64Util.java工具类:

packagecom.gb.util;
importorg.apache.commons.lang3.StringUtils;

/*** @authorguob
 * 加密工具类
 */@SuppressWarnings({ "unused"})
public classBase64Util {

    private static char[] alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=".toCharArray();
    private static byte[] codes = new byte[256];
    static{
        for (int i = 0; i < 256; i++) {
            codes[i] = -1;
        }
        for (int i = 'A'; i <= 'Z'; i++) {
            codes[i] = (byte) (i - 'A');
        }

        for (int i = 'a'; i <= 'z'; i++) {
            codes[i] = (byte) (26 + i - 'a');
        }
        for (int i = '0'; i <= '9'; i++) {
            codes[i] = (byte) (52 + i - '0');
        }
        codes['+'] = 62;
        codes['/'] = 63;
    }

    publicBase64Util() {

    }

    /**加密 */
    public staticString encode(String data) {
        if(StringUtils.isNotBlank(data)) {
            //返回加密后的字符串
            return newString(encode(data.getBytes()));
        } else{
            return "字符串为空,无法进行加密";
        }
    }

    /**解密 */
    public staticString decode(String data) {
        if(StringUtils.isNotBlank(data)) {
            //返回解密后的字符串
            return newString(decode(data.toCharArray()));
        } else{
            return "字符串为空,无法进行解密";
        }
    }

    /**编码 */
    public static char[] encode(byte[] data) {
        char[] out = new char[((data.length + 2) / 3) * 4];
        for (int i = 0, index = 0; i < data.length; i += 3, index += 4) {
            boolean quad = false;
            boolean trip = false;
            int val = (0xFF & (int) data[i]);
            val <<= 8;
            if ((i + 1) <data.length) {
                val |= (0xFF & (int) data[i + 1]);
                trip = true;
            }
            val <<= 8;
            if ((i + 2) <data.length) {
                val |= (0xFF & (int) data[i + 2]);
                quad = true;
            }
            out[index + 3] = alphabet[(quad ? (val & 0x3F) : 64)];
            val >>= 6;
            out[index + 2] = alphabet[(trip ? (val & 0x3F) : 64)];
            val >>= 6;
            out[index + 1] = alphabet[val & 0x3F];
            val >>= 6;
            out[index + 0] = alphabet[val & 0x3F];
        }
        returnout;
    }

    /**解码 */
    public static byte[] decode(char[] data) {
        int tempLen =data.length;
        for (int ix = 0; ix < data.length; ix++) {
            if ((data[ix] > 255) || codes[data[ix]] < 0) {
                --tempLen;
            }
        }
        int len = (tempLen / 4) * 3;
        if ((tempLen % 4) == 3) {
            len += 2;
        }
        if ((tempLen % 4) == 2) {
            len += 1;
        }
        byte[] out = new byte[len];
        int shift = 0;
        int accum = 0;
        int index = 0;
        for (int ix = 0; ix < data.length; ix++) {
            int value = (data[ix] > 255) ? -1: codes[data[ix]];
            if (value >= 0) {
                accum <<= 6;
                shift += 6;
                accum |=value;
                if (shift >= 8) {
                    shift -= 8;
                    out[index++] = (byte) ((accum >> shift) & 0xff);
                }
            }
        }
        if (index !=out.length) {
            throw new Error("错误计算的数据长度(写入" + index + "而不是" + out.length + ")");
        }
        returnout;
    }
}

2.使用工具类对接收到参数进行解密:

String password = Base64Util.decode(password);

免责声明:文章转载自《Base64工具类:将前端vue与后台SpringBoot传输的参数进行加密和解密》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇不能安装这个“安装 OS X EI Capitan”应用程序副本不能验证” 的解决办法Redis中算法之——Raft算法下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

vue | 基于vue的城市选择器和搜索城市对应的小区

城市选择器应该是比较常用的一个组件,用户可以去选择自己的城市,选择城市后返回,又根据自己选择的城市搜索小区。 功能展示  这是选择结果 这是选择城市 这是搜索小区 这是搜索小区接口,key为城市名字,id是城市的id 假如切换城市 搜索接口也会相应变化,id=0997 就是指定的搜索城市id 技术栈  vue2.0+vue-router+we...

Vue移动端项目如何使用手机预览调试

  最近在开发移动端Vue移动端项目,查了一些资料,这里分享下如何在webpack工具构建下的vue项目,在手机端调试和预览,言归正传。 1.电脑和手机连接到同一个WIFI a.台式电脑和手机同时链接一个路由器,使用同一个wifi;  b.笔记本也可以直接启用一个wifi,手机链接笔记本wifi也可以; 2.查询本地IP地址 WIN+R,输入cmd回车,...

Vue 数组和对象更新,但是页面没有刷新

在使用数组的时候,数组内部数据发生改变,但是与数组绑定的页面的数据却没有发生变化。 <ul> <li v-for="(item,index) in todos" :key="index">{{item.name}}</li> </ul>    data () { return {...

在Vue中使用了Swiper ,从后台获取动态数据后,swiper滑动失效

原因是因为Swiper提前初始化了,然而数据还没有加载完成。解决方法如下: 1、在Swiper初始化时 swiper0 = new Swiper('.w0', { initialSlide :0, observer:true,//修改swiper自己或子元素时,自动初始化swiper observeParents:true,//修改...

vue 进入页面与离开页面触发事件

1.切换进入当前路由之前的钩子函数 beforeRouteEnter <script> export default { beforeRouteEnter(to, form, next) { next() } } </script> 2.离开当前路由之前的钩子函数 beforeRouteLeave <scri...

uniapp、Vue组件的使用引用子组件、传值

1 //子组件 bar.vue 2 <template> 3 <div class="search-box"> 4 <div @click="say" :title="title" class="icon-dismiss"></div> 5 </div> 6 </...