vue 里使用 crypto-js 实现 DES 算法加解密

简介: vue 里使用 crypto-js 实现 DES 算法加解密

参考CryptoJS文档

20210413174829288.png


代码


代码实现如下:

<template>
  <div class='crypto-js'>
    cryptoJs 测试页面
  </div>
</template>
<script>
import CryptoJS from "crypto-js";
export default {
  data () {
    return {
      hashStr: "凯小默的英文名叫kaimo"
    };
  },
  mounted() {
    // 加密
    const DES_hashStr = CryptoJS.DES.encrypt(
      this.hashStr,
      CryptoJS.enc.Utf8.parse("ABF"),// keyHex
      { 
        mode: CryptoJS.mode.ECB, 
        padding: CryptoJS.pad.Pkcs7 
      } // option
    ).ciphertext.toString();
    console.log('DES_hashStr', DES_hashStr);
    // 解密
    const DES_decrypt_hashStr = CryptoJS.DES.decrypt(
      {
        ciphertext: CryptoJS.enc.Hex.parse(DES_hashStr)
      },
      CryptoJS.enc.Utf8.parse("ABF"),// keyHex
      { 
        mode: CryptoJS.mode.ECB, 
        padding: CryptoJS.pad.Pkcs7
      } // option
    ).toString(CryptoJS.enc.Utf8);
    console.log('DES_decrypt_hashStr', DES_decrypt_hashStr);
  },
};
</script>


效果

如图:

20210413173920575.png

目录
相关文章
|
2月前
|
算法 安全 C语言
使用C语言实现DES算法代码
使用C语言实现DES算法代码
|
2月前
|
JavaScript 算法
Vue的diff 算法详解
Vue的diff算法是一种用于比较新旧虚拟节点(VNode)的差异并高效更新DOM的技术`**。它的核心在于只对同层级的节点进行比较,避免了跨层级的比较,从而将时间复杂度降低到O(n)
|
6天前
|
存储 JavaScript
报错permission.js:41 [Vue warn]: Property “showClose“ must be accessed with “$data.showClose“ because
报错permission.js:41 [Vue warn]: Property “showClose“ must be accessed with “$data.showClose“ because
|
12天前
|
JavaScript 前端开发 UED
Vue工具和生态系统: Vue.js和服务器端渲染(SSR)有关系吗?请解释。
Vue.js是一个渐进式JavaScript框架,常用于开发单页面应用,但其首屏加载较慢影响用户体验和SEO。为解决此问题,Vue.js支持服务器端渲染(SSR),在服务器预生成HTML,加快首屏速度。Vue.js的SSR可手动实现或借助如Nuxt.js的第三方库简化流程。Nuxt.js是基于Vue.js的服务器端渲染框架,整合核心库并提供额外功能,帮助构建高效的应用,改善用户体验。
13 0
|
12天前
|
JavaScript 前端开发 开发者
Vue工具和生态系统: Vue.js和TypeScript可以一起使用吗?
【4月更文挑战第18天】Vue.js与TypeScript兼容,官方文档支持在Vue项目中集成TypeScript。TypeScript作为JavaScript超集,提供静态类型检查和面向对象编程,增强代码准确性和健壮性。使用TypeScript能提前发现潜在错误,提升代码可读性,支持接口和泛型,使数据结构和函数更灵活。然而,不是所有Vue插件都兼容TypeScript,可能需额外配置。推荐尝试在Vue项目中使用TypeScript以提升项目质量。
14 0
|
12天前
|
资源调度 JavaScript 前端开发
Vue工具和生态系统: 如何使用Vue.js实现服务端渲染(SSR)?不少于500字
Vue.js框架用于构建用户界面,而服务端渲染(SSR)能提升首屏加载速度和SEO。以下是使用Vue.js实现SSR的简要步骤:1) 安装vue、vue-server-renderer和express依赖;2) 创建Vue应用如`vue create my-ssr-app`;3) 使用express创建服务器;4) 在Express应用中设定路由处理所有请求;5) 创建渲染器将Vue应用转为HTML;6) 运行服务器如`node my-ssr-app/server.js`。实际应用可能涉及动态内容、状态管理和错误处理等复杂情况。
16 1
|
18天前
|
JavaScript 搜索推荐 测试技术
深入了解 Vue CLI:现代化 Vue.js 项目开发工具
深入了解 Vue CLI:现代化 Vue.js 项目开发工具
|
18天前
|
JavaScript
【vue】vue2 导入外部js文件如何拿到方法的返回值
【vue】vue2 导入外部js文件如何拿到方法的返回值
11 1
|
18天前
|
JavaScript
【vue】 vue2 修改网页标题和图标logo、全局路径、跨域vue.config.js
【vue】 vue2 修改网页标题和图标logo、全局路径、跨域vue.config.js
32 0
|
2月前
|
运维 JavaScript 前端开发
发现了一款宝藏学习项目,包含了Web全栈的知识体系,JS、Vue、React知识就靠它了!
发现了一款宝藏学习项目,包含了Web全栈的知识体系,JS、Vue、React知识就靠它了!