纯新手, 很多网上教程看不懂,而且报错, 自己采出来可用的方式

1. 安装 加密包(在windows下切换到你vue项目目录,全选地址栏,在地址栏输入:cmd.弹出黑窗口后, 输入命令: npm install crypto-js --save-dev): 

问: npm install 中为啥要有 --save-dev, 也没完全看懂啥意思. 就说能想一个d开头的文件目录你加入什么东西... 加什么也不知道

 

2. 创建js文件: secret.js    (你就现在桌面建个js文件, 把下面的东西直接复制进去, 注意: 把csdn的小尾巴去干净)

我是用webStorm编辑的, 直接复制,去掉尾巴, 就应该可以使用

import CryptoJS from 'crypto-js/crypto-js'

// 默认的 KEY 与 iv 如果没有给
const KEY = CryptoJS.enc.Utf8.parse('1234567890123456')
const IV = CryptoJS.enc.Utf8.parse('1234567890123456')

/**
 * AES加密 ：字符串 key iv  返回base64
 */
export function Encrypt (word, keyStr, ivStr) {
  let key = KEY
  let iv = IV

  if (keyStr) {
    key = CryptoJS.enc.Utf8.parse(keyStr)
    iv = CryptoJS.enc.Utf8.parse(ivStr)
  }

  let srcs = CryptoJS.enc.Utf8.parse(word)
  var encrypted = CryptoJS.AES.encrypt(srcs, key, {
    iv: iv,
    mode: CryptoJS.mode.CBC,
    padding: CryptoJS.pad.ZeroPadding
  })
  // console.log("-=-=-=-", encrypted.ciphertext)
  return CryptoJS.enc.Base64.stringify(encrypted.ciphertext)
}

/**
 * AES 解密 ：字符串 key iv  返回base64
 *
 */
export function Decrypt (word, keyStr, ivStr) {
  let key = KEY
  let iv = IV

  if (keyStr) {
    key = CryptoJS.enc.Utf8.parse(keyStr)
    iv = CryptoJS.enc.Utf8.parse(ivStr)
  }

  let base64 = CryptoJS.enc.Base64.parse(word)
  let src = CryptoJS.enc.Base64.stringify(base64)

  var decrypt = CryptoJS.AES.decrypt(src, key, {
    iv: iv,
    mode: CryptoJS.mode.CBC,
    padding: CryptoJS.pad.ZeroPadding
  })

  var decryptedStr = decrypt.toString(CryptoJS.enc.Utf8)
  return decryptedStr.toString()
}

3. 将js文件放到vue项目的util目录下, 别跟我说你的vue项目没有这个目录, 自己创建一个也行, 放到tools目录也是一样的... 

当然, 这个util或者 tools是要放到src下的. 

--继续啰嗦, 说这么直白, 就是不想 让你们看到像大神那么装B的 说的不清不楚的教程. 看到我都想骂他

4. 就是在你要添加的vue文件中引入 这个js文件了, 咋引入呢?  这里就很多文章说不清楚.  因为我没(系统的)学, 所以需要 直白的教程

在</template> 标签下, 或者已经存在的 import ...... 下面 , 添加这句:

import { Encrypt } from '@/util/secret.js' 或者 import { Encrypt } from '@/tools/secret.js'

当然, 或者后面应该知道啥意思吧, 如果你创建的目录是 tools的话, 这个路径就是 tools/secret.js

在交代一下, 这里的@ 表示  src,  也就是说 vue中, 通常路径中看到的@, 就是src路径的意思. 杠精别来呀... 

5. 此时光引入还不够, 我用的webStorm下, 是会报错的, 还要在components 这个里面加上Encrypt ,也就是

import后面{} 这里面的变量名,  让这个页面知道, 引入的这个东西, 可用通过这个变量名来使用, 我是这么理解的. 官方文档天生看不懂. (我认为都是八股文)

components: {
    XInput,
    XButton,
    Toast,
    Encrypt
  },

6. 这时, 就可以使用引入的文件了:

 

Encrypt(this.pwd)

这个不说清楚, 能看明白吗?   这TM不就是刚才js中 其中一个方法名嘛,  括号里的不就是个参数吗, 这个参数就是要加密的参数啊

里面还有个解密的方法, 同样的用法, 就是方法名不同, 能看懂就行