• CryptoJS简单使用(request.js) 拦截器的使用


    首先准备一份明文和秘钥:
      var plaintText = 'aaaaaaaaaaaaaaaa'; // 明文
    var keyStr = 'bbbbbbbbbbbbbbbb'; // 一般key为一个字符串

      参看官网文档,AES方法是支持AES-128、AES-192和AES-256的,加密过程中使用哪种加密方式取决于传入key的类型,否则就会按照AES-256的方式加密。
      CryptoJS supports AES-128, AES-192, and AES-256. It will pick the variant by the size of the key you pass in. If you use a passphrase, then it will generate a 256-bit key.
      由于Java就是按照128bit给的,但是由于是一个字符串,需要先在前端将其转为128bit的才行。
    最开始以为使用CryptoJS.enc.Hex.parse就可以正确地将其转为128bit的key。但是不然...
    经过多次尝试,需要使用CryptoJS.enc.Utf8.parse方法才可以将key转为128bit的。好吧,既然说了是多次尝试,那么就不知道原因了,后期再对其进行更深入的研究。
      // 字符串类型的key用之前需要用uft8先parse一下才能用
    var key = CryptoJS.enc.Utf8.parse(keyStr);

      由于后端使用的是PKCS5Padding,但是在使用CryptoJS的时候发现根本没有这个偏移,查询后发现PKCS5Padding和PKCS7Padding是一样的东东,使用时默认就是按照PKCS7Padding进行偏移的。
      // 加密
    var encryptedData = CryptoJS.AES.encrypt(plaintText, key, {
    mode: CryptoJS.mode.ECB,
    padding: CryptoJS.pad.Pkcs7
    });

      由于CryptoJS生成的密文是一个对象,如果直接将其转为字符串是一个Base64编码过的,在encryptedData.ciphertext上的属性转为字符串才是后端需要的格式。
      var encryptedBase64Str = encryptedData.toString();
    // 输出:'RJcecVhTqCHHnlibzTypzuDvG8kjWC+ot8JuxWVdLgY='
    console.log(encryptedBase64Str);

    // 需要读取encryptedData上的ciphertext.toString()才能拿到跟Java一样的密文
    var encryptedStr = encryptedData.ciphertext.toString();
    // 输出:'44971e715853a821c79e589bcd3ca9cee0ef1bc923582fa8b7c26ec5655d2e06'
    console.log(encryptedStr);

      由于加密后的密文为128位的字符串,那么解密时,需要将其转为Base64编码的格式。
    那么就需要先使用方法CryptoJS.enc.Hex.parse转为十六进制,再使用CryptoJS.enc.Base64.stringify将其变为Base64编码的字符串,此时才可以传入CryptoJS.AES.decrypt方法中对其进行解密。
      // 拿到字符串类型的密文需要先将其用Hex方法parse一下
    var encryptedHexStr = CryptoJS.enc.Hex.parse(encryptedStr);

    // 将密文转为Base64的字符串
    // 只有Base64类型的字符串密文才能对其进行解密
    var encryptedBase64Str = CryptoJS.enc.Base64.stringify(encryptedHexStr);

      使用转为Base64编码后的字符串即可传入CryptoJS.AES.decrypt方法中进行解密操作。
      // 解密
    var decryptedData = CryptoJS.AES.decrypt(encryptedBase64Str, key, {
    mode: CryptoJS.mode.ECB,
    padding: CryptoJS.pad.Pkcs7
    });

      经过CryptoJS解密后,依然是一个对象,将其变成明文就需要按照Utf8格式转为字符串。
      // 解密后,需要按照Utf8的方式将明文转位字符串
    var decryptedStr = decryptedData.toString(CryptoJS.enc.Utf8);
    console.log(decryptedStr); // 'aaaaaaaaaaaaaaaa'

    import { getUserInfo, removeUserInfo, getTk, removeUserId } from '@/utils/auth'
    import axios from 'axios'
    import { Message } from 'element-ui'
    const CryptoJS = require('crypto-js')
    const service = axios.create({
      baseURL: process.env.BASE_API, // api的base_url
      timeout: 30000 // request timeout
    })
    
    // request interceptor
    service.interceptors.request.use(config => {
      // Do something before request is sentx
      let data = config.data
      let result
      if (config.headers['Content-Type'] === 'multipart/form-data') {
        result = data
        config.data = result
        return config
      }
      config.url = `${config.url}?randomNum=${Math.random()}`
      let val
      (data === undefined) ? (val = '') : (val = JSON.stringify(data))
      let dataEncrypt
      getTk()
        ? dataEncrypt = encodeURI(CryptoJS.AES.encrypt(val.toString(), CryptoJS.enc.Utf8.parse(getTk()), {
          mode: CryptoJS.mode.ECB,
          padding: CryptoJS.pad.Pkcs7
        }).toString())
        : dataEncrypt = val
      result = {
        data: dataEncrypt,
        tk: getTk(),
        token: getUserInfo().token
      }
      config.data = result
      return config
    }, error => {
      // Do something with request error
      return Promise.reject(error)
    })
    
    // respone interceptor
    service.interceptors.response.use(
      /**
       * 下面的注释为通过response自定义code来标示请求状态,当code返回如下情况为权限有问题,登出并返回到登录页
       * 如通过xmlhttprequest 状态码标识 逻辑可写在下面error中
       */
      response => {
        const res = response.data
        // const reg = /^1/
        // console.log(111, reg.test(res.code))
        if (res.code !== 200) {
          // 失效、没有token
          if (res.code === 10106 || res.code === 10107 || res.code === 10111) {
            Message({
              message: '登录失效',
              type: 'error',
              duration: 25 * 1000
            })
            removeUserInfo()
            removeUserId()
            setTimeout(() => {
              window.location.href = '/'
            }, 1500)
          }
          return Promise.resolve(response)
        } else {
          return Promise.resolve(response)
        }
      },
      error => {
        Message({
          message: '服务器请求超时',
          type: 'error',
          duration: 25 * 1000
        })
        return Promise.reject(error)
      })
    
    export default service
  • 相关阅读:
    c#装箱和拆箱
    C#数组,ArrayList,List
    Cocos Creator_发布到微信小游戏平台
    unity游戏设计与实现 --读书笔记(一)
    Cocos Creator存储和读取用户数据--官方文档
    C
    233 Matrix 矩阵快速幂
    数学 找规律 Jzzhu and Sequences
    A. Treasure Hunt Codeforces 线性代数
    POJ 2688 Cleaning Robot (BFS+DFS)
  • 原文地址:https://www.cnblogs.com/xufeimei/p/9967884.html
Copyright © 2020-2023  润新知