vue3中使用base64加密(两种方法)

这篇具有很好参考价值的文章主要介绍了vue3中使用base64加密(两种方法)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Hi,今天分享一个在vue中使用base64对用户名、密码进行加密的小案例。

我们是可以有两种方法的:

1.使用插件:js-base64

2.引入文件。

插件--js-base64

1.首先我们安装插件

npm install --save js-base64

2.项目中引入

import {Base64} from 'js-base64'

3.使用

let encodePwd=Base64.encode(password);//加密
let decodePwd=Base64.decode(encodePwd);//解密

文件形式

1.创建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(this: any) {

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

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

2.在文件中引入该文件

import {Base64} from 'js-base64'

3.使用

    //对用户名密码进行base64加密
    let baseUtil = new Base64();
    //对密码进行加密
    let encodePwd = baseUtil.encode(data.password);
    console.log("加密后的pwd", encodePwd);//密码:123123  加密为:MTIzMTIz

抓紧时间练起来吧,兄dei,再不练你就废啦!

记得支持我哦,么么哒,祝您好事成双~~~~~~文章来源地址https://www.toymoban.com/news/detail-517536.html

到了这里,关于vue3中使用base64加密(两种方法)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue中的加密方式(js-base64、crypto-js、jsencrypt、bcryptjs)

    1.安装js-base64库  2. 在Vue组件中引入js-base64库 3.使用js-base64库进行加密 4.Vue中其他加密方式  1.crypto-js 2.jsencrypt 3.bcryptjs 使用 Base64.encode() 方法对字符串进行加密,并使用 Base64.decode() 方法对加密后的字符串进行解密。您可以根据需要使用这些方法来加密和解密字符串。请注意

    2024年02月08日
    浏览(24)
  • uniapp开发微信小程序使用base64进行加密解密

    涉及场景:uniapp开发微信小程序需要使用base64进行加解密。 涉及依赖包:base-64,utf8 涉及到问题描述:首先尝试引入js-base64这个包,经过尝试后发现无法使用,为什么无法使用不晓得,没研究出来。再搜索中找到一篇关于《uniapp使用base64》的文章,文章中使用base64这个包,经

    2024年02月16日
    浏览(38)
  • [虚幻引擎] UE DTBase64 插件说明 使用蓝图对字符串或文件进行Base64加密解密

    本插件可以在虚幻引擎中使用蓝图对字符串,字节数组,文件进行Base64的加密和解密。 目录 1. 节点说明 String To Base64 Base64 To String Binary To Base64 Base64 To Binary File To Base64 Base64 To File 2. 案例演示 3. 插件下载 String To Base64 对字符串进行Base64加密,字符串会自动转换成UTF8的格式,这

    2024年02月13日
    浏览(54)
  • vue 图片转base64格式的方法

    require的方式 用vue引入图片的require方式获取的值可以直接生成base64格式,但是该方法只适用于5kb大小以下的图片 canvas.toDataURL() 该方法canvas.toDataURL(`image/${ext}`)传入的图片类型是什么生成后的base64数据前缀就是什么类型,如果传入的类型和生成的类型不同,则表示该方法不支持

    2023年04月08日
    浏览(33)
  • vue3自动引入插件unplugin-auto-import (vite搭建项目,vue-cli搭建项目两种方式)

    插件地址:https://github.com/antfu/unplugin-auto-import 如果安装了eslint,使用的ref、torefs等报错undefind如下图 需在2个地方vue.config.js ,.eslintrc.js文件做配置 代码:

    2024年02月13日
    浏览(38)
  • base4解密(Base64加密算法)

    base64解密解码转换说明: 1、Base64编码要求把3个8位字节(3*8=24)转化为4个6位的字节(4*6=24),之后在6位的前面补两个0,形成8位一个字节的形式。如果剩下的字符不足3个字节,则用0填充,输出字符使用‘=’,因此编码后输出的文本末尾可能会出现1或2个‘=’。 2、为了保

    2024年02月16日
    浏览(96)
  • base64的使用方法

    目录 介绍 文件加解密的使用方法 字符串的加解密使用方法 介绍 Base64可以对任意的二进制数据进行编码,不论原数据是什么样的(可以是图片、视频、文本、字符串等)编码后我们得到的总是一个由众多字符组成的字符串,而且Base64是可逆的。 文件加解密的使用方法 1.下载

    2024年02月09日
    浏览(29)
  • base64加密解密

    base64加密解密过程 Base64会使用一串固定编码: ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/ 加密过程 想要使用Base64加密,原文长度必须是3的倍数。如果原文不是3的倍数就填充其他符号来凑足成3的倍数; 1,将明文对照以ACSSI码表转换成一个8位二进制数; 2,将转换后的数

    2024年02月04日
    浏览(41)
  • 【base64加密】js/ts的基础加密

    base64的字符串简单加密,主用于网页缓存数据的加密。 适用于常规html、小游戏(egret、cocos、laya)等 原文参考:JS基于base64编码加密解密文本和图片(修订)_js base64加密-CSDN博客 测试:JS实现base64加密解密的方法 - web开发 - 亿速云 使用方法:

    2024年02月07日
    浏览(31)
  • 利用Base64加密算法将数据加密解密

    Base64准确来说并不像是一种加密算法,而更像是一种编码标准。 我们知道现在最为流行的编码标准就是ASCLL,它用八个二进制位(一个char的大小)表示了127个字符,任何二进制序列都可以用这127个字符表示出来。 而Base64则是用6个二进制位表示了64个字符,也就是说,任何的

    2024年04月09日
    浏览(66)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包