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 ...
随机推荐
- [bzoj3694]最短路_树链剖分_线段树
最短路 bzoj-3694 题目大意:给你一个n个点m条边的无向图,源点为1,并且以点1为根给出最短路树.求对于2到n的每个点i,求最短路,要求不经过给出的最短路树上的1到i的路径上的最后一条边. 注 ...
- sql server 学习课件 PPT
http://www.cnblogs.com/woodytu/p/4465288.html
- [Algorithms] The Bayes Rule
Prior odd: The idea is to take the odds for something happening (against it not happening), which we ...
- Apache server配置
Apacheserver在我们生活中非经常常使用 今天给大家将一下mac 下apache server的配置 这对程序来说是必备技能之中的一个,假设我们在公司开发都是用的公司的server 将自己的代 ...
- 用CSS3实现带有阴影效果和颜色渐变的按钮
这里讲下如何利用css3里的两个新属性 box-shadow和transition来实现如下所示的带有阴影和颜色渐变效果的按钮(下面这个只是图片:本想直接在这个页面下嵌html的,,试了后发现有些cs ...
- 怎么修改tomcat端口
tomcat默认的端口是8080,还会占用8005,8009和8443端口.如果已经启动了tomcat,再启动一个tomcat会发现这些端口已经被占用了,这个时候就需要修改端口号. 工具/原料 ...
- 关于QT版本的安装配置的一些困惑
大概是之前安装和使用QT太顺利了,什么都没注意就开始使用了.在使用VS2012开发Qt5.31的程序一段时间以后,虽然好用,但是发现其编译的程序不能在XP上使用,要打补丁才行.不仅VS2012本身要打 ...
- 使用匿名类型做为ComboBox的DataSource
使用匿名类型做为ComboBox的DataSource ArrayList list = new ArrayList(); list.Add(new { id = " ...
- hash哈希
我复习的时候,突然发现没写过hash算法,惊讶!!!赶紧补一下. 把字符串看成base进制的数.Hash值比较就是为了判断是否有相同的字符串.(base是自己定义的大于26的质数,个人认为大一点比较好 ...
- C# Task 源代码阅读(2)
上篇已经讲到Task 的默认的TaskScheduler 为ThreadPoolTaskScheduler. 这时我们回到原来的task 的start方法,在代码最后,调用了 ScheduleAndS ...