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
CryptoJS简单使用(request.js) 拦截器的使用的更多相关文章
- 简单理解Struts2中拦截器与过滤器的区别及执行顺序
简单理解Struts2中拦截器与过滤器的区别及执行顺序 当接收到一个httprequest , a) 当外部的httpservletrequest到来时 b) 初始到了servlet容器 传递给一个标 ...
- axios token header response request http拦截器 axios实现登录、拦截、登出
axios token header response request http拦截器 axios实现登录.拦截.登出 一个项目学会前端实现登录拦截 https://github.com/superm ...
- http request 请求拦截器,有token值则配置上token值
// http request 请求拦截器,有token值则配置上token值 axios.interceptors.request.use( config => { if (token) { ...
- Nest.js 拦截器
Docs: https://docs.nestjs.com/interceptors 该对象包含从路由处理程序返回的值 在方法执行之前/之后绑定额外的逻辑 转换函数返回的结果 转换从函数抛出的异常 / ...
- vue.js 拦截器
document.cookie = "mylogin=1";//1:登陆成功:保存登录状态 main.js router.beforeEach((to, from, next) = ...
- axios封装的拦截器的应用
axios拦截器 页面发送http请求,很多情况我们要对请求和其响应进行特定的处理:如果请求数非常多,单独对每一个请求进行处理会变得非常麻烦,程序的优雅性也会大打折扣.好在强大的axios为开发者 ...
- springMVC 拦截器如何做登录检查及页面跳转
一个非常简单的登录权限拦截器 问题一:登录页面的提交请求肯定是要过滤掉的,目前采用在xml里配置<mvc:mapping path="/supplier/*"/>来过滤 ...
- [ SSH框架 ] Struts2框架学习之四(自定义拦截器)
一.Struts2的拦截器 1.1 拦截器概述 拦截器,在AOP( Aspect-Oriented Programming)中用于在某个方法或字段被访问之前,进行拦截然后在之前或之后加入某些操作.拦截 ...
- vue cli+axios踩坑记录+拦截器使用,代理跨域proxy(更新)
16319 1.首先axios不支持vue.use()方式声明使用,看了所有近乎相同的axios文档都没有提到这一点建议方式 在main.js中如下声明使用 import axios from 'ax ...
随机推荐
- jenkins 构建被中断 脚本却还在执行
JobA + git clean -df 构建被中断 被 XXX 终止 Finished: ABORTED 再次jenkins调用JobA 后台进程中 出现了两个JobA的脚本同时执行,导致一些莫名其 ...
- PatentTips - Mechanisms for strong atomicity in a transactional memory system
BACKGROUND Advances in semi-conductor processing and logic design have permitted an increase in the ...
- Cash Machine POJ 1276 多重背包
Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 35387 Accepted: 12816 Description A B ...
- Spring MVC新手教程(一)
直接干货 model 考虑给用户展示什么.关注支撑业务的信息构成.构建成模型. control 调用业务逻辑产生合适的数据以及传递数据给视图用于呈献: view怎样对数据进行布局,以一种优美的方式展示 ...
- Linux下route add 命令加入路由列表
route add命令的主要作用是加入静态路由,通常的格式是: route ADD 157.0.0.0 MASK 255.0.0.0 157.55.80.1 METRIC 3 IF 2 參数含义:d ...
- I NEED A OFFER! (hdu 1203 01背包)
I NEED A OFFER! Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) ...
- 极光推送案例-PushExample-Jpush
ssh - maven - java项目-极光注冊id完毕推送 这是我学习时的步骤: 1:去极光推送平台注冊账号,自己能够去注冊(一般公司会帮助完毕注冊) 地址:https://www.jpush.c ...
- Jemeter命令执行
http://mp.weixin.qq.com/s?__biz=MzAxOTg2NDUyOA==&mid=2657555034&idx=1&sn=9e6a3fbd5eed859 ...
- HDU1024_Max Sum Plus Plus【滚动数组】
Max Sum Plus Plus Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others ...
- luogu4218 [JSOI2008] 最小生成树计数
题目大意 求一个加权无向图的最小生成树的个数.1<=n<=100; 1<=m<=1000,具有相同权值的边不会超过10条. 题解 命题1 由构成最小生成树的边的边权从小到大排序 ...