vue.js3: 用cryptojs做sha加密(vue@3.2.37 / cryptojs@4.1.1)

一，crypto-js相关地址

1,在npmjs的地址

https://www.npmjs.com/package/crypto-js

2,代码地址:

https://github.com/brix/crypto-js

说明：刘宏缔的架构森林是一个专注架构的博客，地址：https://www.cnblogs.com/architectforest

对应的源码可以访问这里获取： https://github.com/liuhongdi/
或: https://gitee.com/liuhongdi

说明：作者:刘宏缔 邮箱: 371125307@qq.com

二，安装crypto-js:

1,用npm安装

liuhongdi@lhdpc:/data/vue/axios$ npm install crypto-js --save
 
added 1 package in 4s

2,查看已安装的版本:

liuhongdi@lhdpc:/data/vue/axios$ npm list crypto-js
axios@0.1.0 /data/vue/axios
└── crypto-js@4.1.1

三，js代码

<template>
<div>
  <div style="500px;margin: auto;display:flex;flex-direction: column;">
    <div style="500px;line-height: 24px;font-size: 24px;color: #777;margin-top: 20px;">
      SHA加密
    </div>
    <div style="text-align: left;margin-top:10px;">要加密的文本:</div>
    <el-input
        ref="txtRef"
        v-model="txt"
        :rows="3"
        type="textarea"
        placeholder="要加密的文本"
        style="margin-top:10px;500px;"
    />
    <div style="margin-top: 10px;">
      <el-button style="margin-left: 10px;" @click="sha(1)" >SHA1</el-button>
      <el-button style="margin-left: 10px;" @click="sha(224)">SHA224</el-button>
      <el-button style="margin-left: 10px;" @click="sha(256)">SHA256</el-button>
      <el-button style="margin-left: 10px;" @click="sha(384)">SHA384</el-button>
      <el-button style="margin-left: 10px;" @click="sha(512)">SHA512</el-button>
    </div>
    <div style="text-align: left;margin-top:10px;">加密后的文本:</div>
    <el-input
        v-model="cryptTxt"
        :rows="3"
        type="textarea"
        placeholder="加密的文本"
        style="margin-top:10px;500px;"
        readonly="readonly"
    />
  </div>
</div>
</template>

<script>
const CryptoJS = require('crypto-js');
import {ref} from 'vue'
export default {
  name: "ShaComp",
  setup () {
    //待加密的文本
    const txt = ref('');
    //待加密文本的input
    const txtRef = ref(null);
    //加密过的文本
    const cryptTxt = ref('');
    //sha处理
    const sha = (type) => {
      if (txt.value.length == 0) {
        alert("要加密的文本不可为空");
        txtRef.value.focus();
        return;
      } else {
        if (type == 1) {
          cryptTxt.value = CryptoJS.SHA1(txt.value).toString();
        } else if (type == 224) {
          cryptTxt.value = CryptoJS.SHA224(txt.value).toString();
        } else if (type == 256) {
          cryptTxt.value = CryptoJS.SHA256(txt.value).toString();
        } else if (type == 384) {
          cryptTxt.value = CryptoJS.SHA384(txt.value).toString();
        } else if (type == 512) {
          cryptTxt.value = CryptoJS.SHA512(txt.value).toString();
        }
      }
    }
    return {
        txt,
        cryptTxt,
        sha,
        txtRef,
    }
  }
}
</script>

<style scoped>
</style>

四，测试效果

五，查看vue框架的版本: 

liuhongdi@lhdpc:/data/vue/child$ npm list vue
child@0.1.0 /data/vue/child
├─┬ @vue/cli-plugin-babel@5.0.6
│ └─┬ @vue/babel-preset-app@5.0.6
│   └── vue@3.2.37 deduped
└─┬ vue@3.2.37
  └─┬ @vue/server-renderer@3.2.37
    └── vue@3.2.37 deduped