vue中jsencrypt与base64加密解密的实用流程

 更新时间:2023年10月16日 11:21:12   作者:码路老默007  
vue项目里面使用到的加密和解密的方法,本文主要介绍了vue中jsencrypt与base64加密解密的实用流程,具有一定的参考价值,感兴趣的可以了解一下

jsencrypt的实用流程

第一步,下载

npm install jsencrypt --dev 

第二步,建立jsencrypt.js文件(一般放在utils文件夹里边),内容如下

通过公钥加密,私钥解密,哪个页面需要引入utils/jsencrypt文件即可

import JSEncrypt from 'jsencrypt/bin/jsencrypt.min'

// 密钥对生成 http://web.chacuo.net/netrsakeypair; 把下面生成的公钥、私钥换成自己生成的即可
const publicKey = '',//生成的公钥
const privateKey='',

// 加密
export function encrypt(txt) {
  const encryptor = new JSEncrypt()
  encryptor.setPublicKey(publicKey) // 设置公钥
  return encryptor.encrypt(txt) // 对数据进行加密
}

// 解密
export function decrypt(txt) {
  const encryptor = new JSEncrypt()
  encryptor.setPrivateKey(privateKey) // 设置私钥
  return encryptor.decrypt(txt) // 对数据进行解密
}

第三步,页面使用

import { encrypt, decrypt } from '@/utils/jsencrypt'//rememberMe-password加密

Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 });//存到cookies时加密

this.loginForm.password : decrypt(password),//取出时解密

base64的实用流程

Base64是网络上最常见的用于传输8Bit字节码的编码方式之一

在前端项目可用于用户输入密码时加密使用,防止在数据传输到数据库时密码泄露

第一步,下载

npm install jsencrypt --dev 

第二步,在项目文件中引入

let Base64 = require('js-base64').Base64;

第三步,加密与解密

encode为加密,decode为解密

Base64.encode('admin') //YWRtaW4=
Base64.decode('YWRtaW4=') //admin

 到此这篇关于vue中jsencrypt与base64加密解密的实用流程的文章就介绍到这了,更多相关vue jsencrypt与base64加密解密内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • DeepSeek 助力 Vue 开发丝滑的步骤条效果(过程详解)

    DeepSeek 助力 Vue 开发丝滑的步骤条效果(过程详解)

    本文详细介绍了如何使用Vue.js和ElementUI创建一个进度条组件,并将所有代码保存在一个文件夹中,本文给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
    2025-02-02
  • element table数据量太大导致网页卡死崩溃的解决办法

    element table数据量太大导致网页卡死崩溃的解决办法

    当页面数据过多,前端渲染大量的DOM时,会造成页面卡死问题,下面这篇文章主要给大家介绍了关于element table数据量太大导致网页卡死崩溃的解决办法,需要的朋友可以参考下
    2023-02-02
  • vue项目proxyTable配置小结

    vue项目proxyTable配置小结

    本文主要介绍了vue项目proxyTable配置小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-04-04
  • vue路径上如何设置指定的前缀

    vue路径上如何设置指定的前缀

    这篇文章主要介绍了vue路径上如何设置指定的前缀,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-07-07
  • vue中如何初始化data数据

    vue中如何初始化data数据

    这篇文章主要介绍了vue中如何初始化data数据,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-05-05
  • vue3.x lodash在项目中管理封装指令的优雅使用

    vue3.x lodash在项目中管理封装指令的优雅使用

    这篇文章主要为大家介绍了vue3.x lodash在项目中管理封装指令的优雅使用示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-09-09
  • Vue出现弹出层时禁止底部页面跟随滑动

    Vue出现弹出层时禁止底部页面跟随滑动

    本文主要介绍了Vue出现弹出层时禁止底部页面跟随滑动,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-07-07
  • Vue注册模块与登录状态的持久化实现方法详解

    Vue注册模块与登录状态的持久化实现方法详解

    这篇文章主要介绍了Vue注册模块与登录状态的持久化实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-08-08
  • vue实现图片路径转二进制文件流(binary)

    vue实现图片路径转二进制文件流(binary)

    这篇文章主要介绍了vue实现图片路径转二进制文件流(binary),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-06-06
  • 强制Vue重新渲染组件的5种方法小结

    强制Vue重新渲染组件的5种方法小结

    在开发Vue.js应用程序时,有时我们需要强制重新渲染组件以确保数据和视图同步,下面就来介绍一下强制Vue重新渲染组件的5种方法,感兴趣的可以了解一下
    2025-06-06

最新评论