精华内容
下载资源
问答
  • Vue引入版本crypto-js.js

    2021-02-27 13:45:26
    VUE中使用crypto-js
  • vue中使用crypto-js实现密码加密(此处只记录了前端加密)1、npm引入crypto-js依赖2、创建js文件引入crypto-js并写入加密方法3、在需要加密的组件内使用cryptoObj加密方法 1、npm引入crypto-js依赖 npm install ...

    1、npm引入crypto-js依赖

    npm install crypto-js -D
    
    npm install crypto-js -D
    

    若出现报错,我的报错如下(可能是因为使用了淘宝镜像):

    npm ERR! code 1
    npm ERR! path E:\Users\yidu_\Documents\pccm-screen\node_modules\node-sass
    npm ERR! command failed
    npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c node-gyp rebuild
    npm ERR! gyp info it worked if it ends with ok
    npm ERR! gyp info using node-gyp@3.8.0
    npm ERR! gyp info using node@14.15.1 | win32 | x64
    npm ERR! gyp ERR! configure error
    npm ERR! gyp ERR! stack Error: Command failed: D:\ProgramData\Anaconda3\python.EXE -c import sys; print "%s.%s.%s" % sys.version_info[:3];
    npm ERR! gyp ERR! stack   File "<string>", line 1
    npm ERR! gyp ERR! stack     import sys; print "%s.%s.%s" % sys.version_info[:3];
    npm ERR! gyp ERR! stack                                ^
    npm ERR! gyp ERR! stack SyntaxError: invalid syntax
    npm ERR! gyp ERR! stack
    npm ERR! gyp ERR! stack     at ChildProcess.exithandler (child_process.js:308:12)
    npm ERR! gyp ERR! stack     at ChildProcess.emit (events.js:315:20)
    npm ERR! gyp ERR! stack     at maybeClose (internal/child_process.js:1048:16)
    npm ERR! gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:288:5)
    npm ERR! gyp ERR! System Windows_NT 10.0.19042
    npm ERR! gyp ERR! command "D:\\Program Files\\nodejs\\node.exe" "E:\\Users\\yidu_\\Documents\\pccm-screen\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebu
    ild"
    npm ERR! gyp ERR! cwd E:\Users\yidu_\Documents\pccm-screen\node_modules\node-sass
    npm ERR! gyp ERR! node -v v14.15.1
    npm ERR! gyp ERR! node-gyp -v v3.8.0
    npm ERR! gyp ERR! not ok
    
    npm ERR! A complete log of this run can be found in:
    npm ERR!     D:\Program Files\nodejs\node_cachel\_logs\2021-05-06T07_10_11_380Z-debug.log
    
    

    所以之后我使用淘宝镜像进行安装

    cnpm install crypto-js -D
    
    cnpm install crypto-js -D
    

    安装成功:

    √ Installed 1 packages
    √ Linked 0 latest versions
    √ Run 0 scripts
    √ All packages installed (1 packages installed from npm registry, used 283ms(network 278ms), speed 4.58kB/s, json 1(1.27kB), tarball 0B)
    

    2、创建js文件引入crypto-js并写入加密方法

    在src-assets文件夹下创建js文件 cryp.js
    在这里插入图片描述
    在cryp.js文件中引入crypto-js并写入加密方法:

    import CryptoJS from 'crypto-js'
    
    var cryptoObj = {
        /* 加密 */
        encryptFunc: (message) => {
            var key = '12345678900';//前后端约定好的秘钥
            var keyHex = CryptoJS.enc.Utf8.parse(key);
            var encrypted = CryptoJS.AES.encrypt(message, keyHex, {
                mode: CryptoJS.mode.ECB,
                padding: CryptoJS.pad.Pkcs7
            });
            return encrypted.toString();
    
        },
    }
    
    export default cryptoObj;
    

    3、在需要加密的组件内使用cryptoObj加密方法

    <script>
      import  cryptoJSObj  from  '@/assets/cryp.js'
      export default {
      name: 'Login',
      data(){
        // 手机号码验证
        var contactPhone = (rule, value, callback) => {
          if (!value) {
            return callback(new Error('手机号不能为空'))
          } else {
            const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
            if (reg.test(value)) {
              callback()
            } else {
              return callback(new Error('请输入正确的手机号'))
            }
          }
        };
        return{
          loading:false,
          form: {
            account: '',
            password: '',
          },
    
          formRules: {// 新增或编辑验证规则
            account: [
              { required: true, message: '账号不能为空' }
            ],
            password: [
              { required: true, message: '请输入密码', trigger: 'blur' },
              { min: 13, message: '密码长度应大于12位', trigger: 'blur' },
              { pattern: /^(?=.*[a-zA-Z])(?=.*[1-9])(?=.*[\W]).{13,}$/, message: '必须包含大小写字母、数字的组合、特殊字符,长度大于12位' }
            ],
          },
        }
      },
      created() {
    
      },
      methods:{
        startLogin:(){
          let password=cryptoJSObj.encryptFunc(form.password)
          //此处password为加密后的密码,form.password为输入的密码
        },
      }
    }
    </script>
    

    到这里就全部完成了。

    展开全文
  • 在Api文件夹(接口文件夹)新建encrypt.js文件 (此为较简洁方法,未处理数据,未用到密钥偏移量) const CryptoJS = require('crypto-js') // 引用AES源码js // const key = CryptoJS.enc.Utf8....

    1.安装crypto-js
    cnpm install crypto-js --save

    2.编写encrypt.js
    在Api文件夹(接口文件夹)中新建encrypt.js文件
    (此为较简洁方法,未处理数据,未用到密钥偏移量)

     const CryptoJS = require('crypto-js') // 引用AES源码js
    
    // const key = CryptoJS.enc.Utf8.parse('1234123412ABCDEF') // 十六位十六进制数作为密钥
    // const iv = CryptoJS.enc.Utf8.parse('ABCDEF1234123412') // 十六位十六进制数作为密钥偏移量
    
    // 解密方法
    function Decrypt (word, key) {
      let ckey = CryptoJS.enc.Utf8.parse(key) // 十六位十六进制数作为密钥
      // let encryptedHexStr = CryptoJS.enc.Hex.parse(word)
      // let srcs = CryptoJS.enc.Base64.stringify(encryptedHexStr)
    
      let decrypt = CryptoJS.AES.decrypt(word, ckey, {
    
        mode: CryptoJS.mode.ECB,
        padding: CryptoJS.pad.Pkcs7
      })
      let decryptedStr = decrypt.toString(CryptoJS.enc.Utf8)
      console.log('decryptedStr', decryptedStr.toString())
    
      return decryptedStr.toString()
    }
    
    // 加密方法
    fun
    展开全文
  • vue中使用crypto-js加密密码等信息

    千次阅读 2019-05-29 17:39:47
    crypto-js加密AES 最近项目需要在登陆请求时将密码加密,要求使用aes方式加密, 于是用到了crypto-js完美解决,亲测有效 要注意前端和后端的加密配置要保持一致 1.安装crypto-js npm install crypto-js --...

    crypto-js加密AES

    最近项目中需要在登陆请求时将密码加密,要求使用aes方式加密官方的一种说法:

    高级加密标准(英语:Advanced Encryption Standard,缩写:AES),在密码学中又称Rijndael加密法,是美国联邦政府采用的一种区块加密标准。这个标准用来替代原先的DES,已经被多方分析且广为全世界所使用。经过五年的甄选流程,高级加密标准由美国国家标准与技术研究院(NIST)于2001年11月26日发布于FIPS PUB 197,并在2002年5月26日成为有效的标准。2006年,高级加密标准已然成为对称密钥加密中最流行的算法之一。

    于是用到了crypto-js完美解决,亲测有效

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

    要注意前端和后端的加密配置要保持一致

    1.安装crypto-js

      npm install crypto-js --save
    

    2.编写encrypt.js

    在Api文件夹中新建encrypt.js文件
    (此为较简洁方法,未处理数据,未用到密钥偏移量)

     const CryptoJS = require('crypto-js') // 引用AES源码js
    
    // const key = CryptoJS.enc.Utf8.parse('1234123412ABCDEF') // 十六位十六进制数作为密钥
    // const iv = CryptoJS.enc.Utf8.parse('ABCDEF1234123412') // 十六位十六进制数作为密钥偏移量
    
    // 解密方法
    function Decrypt (word, key) {
      let ckey = CryptoJS.enc.Utf8.parse(key) // 十六位十六进制数作为密钥
      // let encryptedHexStr = CryptoJS.enc.Hex.parse(word)
      // let srcs = CryptoJS.enc.Base64.stringify(encryptedHexStr)
    
      let decrypt = CryptoJS.AES.decrypt(word, ckey, {
    
        mode: CryptoJS.mode.ECB,
        padding: CryptoJS.pad.Pkcs7
      })
      let decryptedStr = decrypt.toString(CryptoJS.enc.Utf8)
      console.log('decryptedStr', decryptedStr.toString())
    
      return decryptedStr.toString()
    }
    
    // 加密方法
    function Encrypt (word, key) {
      let ckey = CryptoJS.enc.Utf8.parse(key)
      // let srcs = CryptoJS.enc.Utf8.parse(word)
      let encrypted = CryptoJS.AES.encrypt(word, ckey, {
        mode: CryptoJS.mode.ECB,
        padding: CryptoJS.pad.Pkcs7
      })
      console.log('encrypted', encrypted.toString())
      return encrypted.toString()
    }
    export default {
      Decrypt,
      Encrypt
    }
    
    

    3.页面用法

    在.vue页面中:

    <template>
      <div>
      </div>
    </template>
    <script>
    import encrypt from "@/api/encrypt";//根据实际路径引入encrypt.js文件
    //....
    //....
    export default {
      data() {
        return {
          ruleForm: {
            userName: "",
            password: "",
          },
        }
      }
      //.....
      //....
      login() {
      //....
        let key="123456789"//设置密钥
        this.ruleForm.password = encrypt.Encrypt(this.ruleForm.password, key);//加密
        let psd = encrypt.Decrypt(this.ruleForm.password, key);//解密
      //....
      }
      //...
      //....
    }
     
    </script>
    
    展开全文
  • import CryptoJS from 'crypto-js' /** * @word 要加密的内容 * @keyWord String 服务器随机返回的关键字 * */ //加密 export function aesEncrypt(word,keyWord="Buyti998OZkX"){ let key = CryptoJS.enc.Utf8....

    使用crypto-js进行AES加密和解密的方法

    import CryptoJS from 'crypto-js'
    /**
     * @word 要加密的内容
     * @keyWord String  服务器随机返回的关键字
     *  */
    //加密
    export function aesEncrypt(word,keyWord="Buyti998OZkX"){
      let key = CryptoJS.enc.Utf8.parse(keyWord);
      let srcWords = CryptoJS.enc.Utf8.parse(word);
      let encrypted = CryptoJS.AES.encrypt(srcWords, key, {mode:CryptoJS.mode.ECB,padding: CryptoJS.pad.Pkcs7});
      return encrypted.toString();
    }
    //解密 
    export function encrypted(word,keyWord="Buyti998OZkX"){
      let key = CryptoJS.enc.Utf8.parse(keyWord);
      let decrypt = CryptoJS.AES.decrypt(word, key, {mode:CryptoJS.mode.ECB,padding: CryptoJS.pad.Pkcs7});
      return CryptoJS.enc.Utf8.stringify(decrypt).toString()
    }
    
    

    然后在需要应用的文件中导入方法并应用就可以了

    展开全文
  • ## 第一步:安装、引入 crypto-js ``` npm install --save crypto-js import CryptoJS from 'crypto-js' ``` 第二步:实现加密方法 ``` export function encryp( key , iv , data ){ if( typeof data === "object" ...
  • const CryptoJS = require('crypto-js') let timestamp = new Date().getTime() // 当前的时间戳 timestamp = parseInt(timestamp / 1000) + 36000 let putPolicy = {'scope': 'img_bucket1', 'deadline': timestamp...
  • Vue 使用crypto-js进行AES加密 想到使用AES加密的都应该知道这种加密该用在什么场景,直切主题。 第一步,安装crypto-js的依赖: npm install crypto-js --save 第二步:在工具类文件夹(utils)下新建secret.js...
  • 项目后端要求前端请求后台接口时对请求参数进行加密处理。 因为我的需求是加密可逆,后端要求使用3DES加解密,最后返回返回base64格式 加密过得,传给后端,后端再进行解密。 什么是3DES?? 3DES(即Triple DES)...
  • 1. 安装crypto-js npm install crypto-js -D 2. 在src目录下,建立crypto文件夹,新建index.js文件,写入加密代码 /* * @Descripttion: 对用户登录信息进行加密处理 * @version: * @Author: zhangfan * @email...
  • 一个用于将crypto-js集成到VueJS的小包装器 如何安装: npm install vue-cryptojs 并在您的输入文件: import Vue from 'vue' import VueCryptojs from 'vue-cryptojs' Vue . use ( VueCryptojs ) 用法: ...
  • 小程序开发 crypto-js 报错 加密 解密 maximum call stack size exceeded
  • Vue利用crypto-js加密

    2020-07-31 18:55:51
    npm install crypto-js 创建secureUtil.js文件 import CryptoJS from 'crypto-js' export default { encrypt(word, keyStr) { const keyHex = CryptoJS.enc.Utf8.parse(keyStr) // 秘钥 const srcs = CryptoJS....
  • 实现思路:在项目安装引入crypto-js 依赖,然后写个加密方法,如果有区分get跟post两种请求方式那就写两个加密方法。最后在axios请求拦截方法调用即可。 1.安装引入crypto-js。 npm install crypto-js -D 2.在...
  • 基于VUE的前端crypto-js aes加密与解密

    千次阅读 2018-11-28 17:10:00
    第一步: npm install crypto-js --save 第二步:在utils文件夹下新建secret.js文件,封装公共方法。 密钥可由服务端返回 const CryptoJS = require('crypto-js'); //引用AES源码js const key = CryptoJS...
  • 给大家介绍一下关于vue中使用cookies和crypto-js如何实现密码的加密与记住密码,有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。
  • 在要使用加密的vue页面引入index.js中的加密对象cryptoJSObj 4.使用cryptoJSObj.encryptFunc(用户输入的密码,'123456789GFEDCBA')对用户密码进行加密处理 =============================================应用==...
  • 2.如果4.0.0的版本还是报错,那就把node_modelscrypto-js中crypto-js.js文件复制出来直接引用,不用再引入模块。然后把crypto-js.js中的报错信息修改掉。基本就是给所有报错信息加上 // eslint-disable-next-...
  • 一、安装crypto-js npm install crypto-js --save 二、配置 在src目录下得components里创建utils.js、代码如下: const CryptoJS = require('crypto-js'); //引用AES源码js const key = CryptoJS.enc.Utf8.parse...
  • npm install crypto-js 或者yarn add crypto-js 2. 引入crypto-js,并封装加密解密的方法 在项目的src下的utils文件夹(自己建的文件夹)下新建一个encrypt.js文件,内容如下: import CryptoJs from 'crypto-js' /...
  • 第一步: 安装 crypto-js npm install crypto-js 第二步:引用 import CryptoJS from 'crypto-js/crypto-js' 第三步 // str 是按照网站或者自己的规则拼接的字符串,像币安里面就是将传递的参数拼接成字符串 // ...
  • npm install crypto-js 第二步,在你需要的vue组件内import import CryptoJS from "crypto-js"; 第三步,使用 登录的方法如下: 最后要在created狗子函数内判断用户是否记住了密码来执行相关的操作 //设置...
  • div class='crypto-js'> cryptoJs 测试页面 </div> </template> <script> import CryptoJS from "crypto-js"; export default { data () { return { hashStr: "凯小默的英文名叫kaimo" ...
  • 1、先在vue项目安装crypto-js 2、新建一个utils.js文件 3、utils.js内容 /** * 工具类 */ import Vue from 'vue' import CryptoJS from 'crypto-js' export default {//加密 encrypt(word, keyStr){ keyStr...
  • crypto-js报UglifyJs错误

    2021-10-08 11:24:22
    Unexpected token operator «=», expected punc «,» [./node_modules/_crypto-js@4.1.1@crypto-js/enc-base64url.js:42,0][Content/js/vendor.6d8d70fb21cdf2ca01ff.js:21849,48] 分别按照网
  • 主要用到js-cookie来存储用户名和密码,关于js-cookie介绍:...二、main.js中全局引入 import Cookies from 'js-cookie' Vue.prototype.$cookie = Cookies; 三、使用 <el-checkbox v-model="rem..

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,998
精华内容 799
关键字:

vue中使用crypto-js

vue 订阅