首先准备一份明文和秘钥:
  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

CryptoJS简单使用(request.js) 拦截器的使用的更多相关文章

  1. 简单理解Struts2中拦截器与过滤器的区别及执行顺序

    简单理解Struts2中拦截器与过滤器的区别及执行顺序 当接收到一个httprequest , a) 当外部的httpservletrequest到来时 b) 初始到了servlet容器 传递给一个标 ...

  2. axios token header response request http拦截器 axios实现登录、拦截、登出

    axios token header response request http拦截器 axios实现登录.拦截.登出 一个项目学会前端实现登录拦截 https://github.com/superm ...

  3. http request 请求拦截器,有token值则配置上token值

    // http request 请求拦截器,有token值则配置上token值 axios.interceptors.request.use( config => { if (token) { ...

  4. Nest.js 拦截器

    Docs: https://docs.nestjs.com/interceptors 该对象包含从路由处理程序返回的值 在方法执行之前/之后绑定额外的逻辑 转换函数返回的结果 转换从函数抛出的异常 / ...

  5. vue.js 拦截器

    document.cookie = "mylogin=1";//1:登陆成功:保存登录状态 main.js router.beforeEach((to, from, next) = ...

  6. axios封装的拦截器的应用

    axios拦截器   页面发送http请求,很多情况我们要对请求和其响应进行特定的处理:如果请求数非常多,单独对每一个请求进行处理会变得非常麻烦,程序的优雅性也会大打折扣.好在强大的axios为开发者 ...

  7. springMVC 拦截器如何做登录检查及页面跳转

    一个非常简单的登录权限拦截器 问题一:登录页面的提交请求肯定是要过滤掉的,目前采用在xml里配置<mvc:mapping path="/supplier/*"/>来过滤 ...

  8. [ SSH框架 ] Struts2框架学习之四(自定义拦截器)

    一.Struts2的拦截器 1.1 拦截器概述 拦截器,在AOP( Aspect-Oriented Programming)中用于在某个方法或字段被访问之前,进行拦截然后在之前或之后加入某些操作.拦截 ...

  9. vue cli+axios踩坑记录+拦截器使用,代理跨域proxy(更新)

    16319 1.首先axios不支持vue.use()方式声明使用,看了所有近乎相同的axios文档都没有提到这一点建议方式 在main.js中如下声明使用 import axios from 'ax ...

随机推荐

  1. 清北学堂模拟赛d1t6 或和异或(xor)

    题目描述 LYK最近在研究位运算,它研究的主要有两个:or和xor.(C语言中对于|和^) 为了更好的了解这两个运算符,LYK找来了一个2^n长度的数组.它第一次先对所有相邻两个数执行or操作,得到一 ...

  2. poj3233 题解 矩阵乘法 矩阵快速幂

    题意:求S = A + A2 + A3 + … + Ak.(mod m) 这道题很明显可以用矩阵乘法,但是这道题的矩阵是分块矩阵, 分块矩阵概念如下:当一个矩阵A中的单位元素aij不是一个数值而是一个 ...

  3. java中Long 和long的区别

    Java的数据类型分两种:1.基本类型:long,int,byte,float,double,char2. 对象类型(类): Long,Integer,Byte,Float,Double,Char,S ...

  4. R语言为数据框添加列名或行名

    1.添加列名 wts=c(1,1,1) names(wts)=c("setosa","versicolor","virginica") 2. ...

  5. HDU 5434

    其实是一道状态DP题.都是行与行之间的转移,可以知道,当某j列中有一个象,如果存在情况i-1行j-1列有象而i,j-1位置无象则不可放,或者i-1,j+1有而i,j+1无同样不可放. 使用快速状态转移 ...

  6. HDU 4532

    #include <iostream> #include <cstdio> #include <cstring> #include <algorithm> ...

  7. volatile非原子性的示例

    volatile非原子性的示例 package com.stono.thread2.page124; public class MyThread extends Thread { volatile p ...

  8. selenium IDE 回放报错

    解决:Selenium RC未启动,启动即可. java -jar selenium-server-standalone-2.25.0.jar 启动RC报错,提示找不到firefox的path,于是配 ...

  9. Linux(redhat 5.8)下 安装jetty 部署 使用

    首先须要安装JDK,自行解决 下载jetty安装包http://dist.codehaus.org/jetty/ 我下载的是8.1.15 tar -xzvf *.tar.gz 解压完之后,基本就能够用 ...

  10. 【NOI 2014】 动物园

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=3670 [算法] KMP [代码] #include<bits/stdc++.h ...