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 ...
随机推荐
- PL/SQL Challenge 每日一题:2014-3-14 11gR2中带RELIES_ON子句的RESULT_CACHE函数
PL/SQL Challenge 每日一题:2014-3-14 11gR2中带RELIES_ON子句的RESULT_CACHE函数 最先答对且答案未经编辑的puber将获得纪念章一枚(答案不可编辑但可 ...
- ddl in PL/SQL
If you write DDL directly in PL/SQL. You will hit error. 1 DECLARE 2 str_sql varchar2(500); 3 begin ...
- Unity3d-反编译C#和提取资源
使用MonoDevelop查看代码 1.解压缩一个Ipa文件,找到如下目录 2.拖拽一个Assembly-CSharp.dll文件到MonoDevelop工具栏,即可查看C#代码 其他C#反编译工具: ...
- $().attr()的使用方法 && $().html()与$().text()的差别
<1>$().attr()的使用方法 </pre><pre class="html" name="code"><htm ...
- mysql学习之四:sql语句学习2
创建数据库: CREATE DATABASE stefan; 删除数据库: DROP DATABASE stefan; 重命名数据库: 重命名数据库没有直接的办法. 已经不再使用的方法: RENAME ...
- Java获取路径中的文件名(正则表达式)
Java获取路径中的文件名(正则表达式) 目标 在这个路径中我想得到model2 /E:/2017-02-21--SoftWare/github/test/Java/poiDemo_word2exce ...
- UESTC--1253--阿里巴巴和n个大盗 (博弈)
阿里巴巴和n个大盗 Time Limit: 1000MS Memory Limit: 65535KB 64bit IO Format: %lld & %llu Submit St ...
- Swift备忘录
Swift 备忘录 2015-4 一.简介 1.Swift 语言由苹果公司在2010年7月开始设计,在 2014 年6月推出,在 2015 年 12 月 3 日开源 2.特点(官方): (1)苹果宣称 ...
- leetcode数组相关
目录 4寻找两个有序数组的中位数 11盛最多水的容器,42接雨水 15三数之和,16最接近的三数之和,18四数之和 26/80删除排序数组中的重复项, 27移除元素 31下一个排列 53最大子序和 5 ...
- XML案例(使用DOM4J解析XML文档)
1.Demo1.java package cn.itcast.dom4j; import java.io.File;import java.io.FileOutputStream;import jav ...