增加crypto;优化layer.toast
parent
5a508d3356
commit
8b87fe8ec7
|
@ -0,0 +1,47 @@
|
|||
# crypto & md5 加密组件
|
||||
|
||||
|
||||
|
||||
|
||||
## md5
|
||||
> 这里使用的是第三方的 SparkMD5 实现
|
||||
|
||||
```javascript
|
||||
|
||||
import { md5, md5Sum } from 'crypto/md5'
|
||||
|
||||
// 直接计算字段串的md5值
|
||||
console.log(md5('123456'))
|
||||
|
||||
|
||||
// 计算该文件的md5签名
|
||||
var file = /*...*/ //文件表单获取
|
||||
var fs = new FileReader()
|
||||
fs.onload = function(){
|
||||
console.log(md5Sum(this.result))
|
||||
}
|
||||
fs.readAsBinaryString(file)
|
||||
|
||||
```
|
||||
|
||||
|
||||
## crypto
|
||||
> 这里使用的是浏览器内置的实现, 需要在https下或本地才能用。
|
||||
>> 返回值都是Promise对象
|
||||
|
||||
```javascript
|
||||
|
||||
import hash, { sha1, sha256, sha512, hmac, base64encode, base64decode } from 'crypto/index'
|
||||
|
||||
|
||||
|
||||
hash('sha-1', '123456')
|
||||
// 等价于
|
||||
sha1('123456')
|
||||
|
||||
|
||||
// hmac签名
|
||||
hmac('sha-1', '123456', 'a key', 'hex')
|
||||
|
||||
|
||||
```
|
|
@ -0,0 +1,77 @@
|
|||
const encoder = new TextEncoder()
|
||||
const subtle = window.crypto.subtle
|
||||
|
||||
/**
|
||||
* String 转 Uint8Array
|
||||
*/
|
||||
function str2uint(txt) {
|
||||
return encoder.encode(txt)
|
||||
}
|
||||
|
||||
/**
|
||||
* ArrayBuffer 转 hex
|
||||
*/
|
||||
function ab2hex(buf) {
|
||||
var uint8 = new Uint8Array(buf)
|
||||
return [...uint8].map(n => n.toString(16).padStart(2, '0')).join('')
|
||||
}
|
||||
|
||||
/**
|
||||
* ArrayBuffer 转 Binary
|
||||
*/
|
||||
function ab2bin(buf) {
|
||||
var bin = ''
|
||||
var uint8 = new Uint8Array(buf)
|
||||
for (var i = 0; i < uint8.length; i++) {
|
||||
bin += String.fromCharCode(uint8[i])
|
||||
}
|
||||
return bin
|
||||
}
|
||||
|
||||
/* ------------------------------------- */
|
||||
|
||||
export default function hash(type, str) {
|
||||
return subtle.digest(type, str2uint(str)).then(buf => ab2hex(buf))
|
||||
}
|
||||
|
||||
export function sha1(str) {
|
||||
return hash('sha-1', str)
|
||||
}
|
||||
|
||||
export function sha256(str) {
|
||||
return hash('sha-256', str)
|
||||
}
|
||||
|
||||
export function sha512(str) {
|
||||
return hash('sha-512', str)
|
||||
}
|
||||
|
||||
export function hmac(mode, str, key, output) {
|
||||
key = key === '' ? new Uint8Array(16) : str2uint(key)
|
||||
return subtle
|
||||
.importKey('raw', key, { name: 'HMAC', hash: { name: mode } }, true, [
|
||||
'sign',
|
||||
'verify'
|
||||
])
|
||||
.then(cKey => {
|
||||
return subtle.sign('HMAC', cKey, str2uint(str)).then(buf => {
|
||||
if (output === 'binary') {
|
||||
return ab2bin(buf)
|
||||
} else if (output === 'hex') {
|
||||
return ab2hex(buf)
|
||||
} else if (output === 'base64') {
|
||||
return window.btoa(ab2bin(buf))
|
||||
}
|
||||
return new Uint8Array(buf)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
// 支持对中文的base64编码
|
||||
export function base64encode(str) {
|
||||
return window.btoa(unescape(encodeURIComponent(str)))
|
||||
}
|
||||
|
||||
export function base64decode(str) {
|
||||
return decodeURIComponent(escape(window.atob(str)))
|
||||
}
|
|
@ -1,10 +1,10 @@
|
|||
/*
|
||||
* Fastest md5 implementation around (JKM md5).
|
||||
* Credits: Joseph Myers
|
||||
*
|
||||
* @see http://www.myersdaily.org/joseph/javascript/md5-text.html
|
||||
* @see http://jsperf.com/md5-shootout/7
|
||||
*/
|
||||
* Fastest md5 implementation around (JKM md5).
|
||||
* Credits: Joseph Myers
|
||||
*
|
||||
* @see http://www.myersdaily.org/joseph/javascript/md5-text.html
|
||||
* @see http://jsperf.com/md5-shootout/7
|
||||
*/
|
||||
|
||||
/* this function is much faster,
|
||||
so if possible we use it. Some IEs
|
||||
|
@ -224,9 +224,9 @@ function md51(s) {
|
|||
length = s.length
|
||||
tail = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
|
||||
for (i = 0; i < length; i += 1) {
|
||||
tail[i >> 2] |= s.charCodeAt(i) << ((i % 4) << 3)
|
||||
tail[i >> 2] |= s.charCodeAt(i) << (i % 4 << 3)
|
||||
}
|
||||
tail[i >> 2] |= 0x80 << ((i % 4) << 3)
|
||||
tail[i >> 2] |= 0x80 << (i % 4 << 3)
|
||||
if (i > 55) {
|
||||
md5cycle(state, tail)
|
||||
for (i = 0; i < 16; i += 1) {
|
||||
|
@ -270,10 +270,10 @@ function md51_array(a) {
|
|||
length = a.length
|
||||
tail = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
|
||||
for (i = 0; i < length; i += 1) {
|
||||
tail[i >> 2] |= a[i] << ((i % 4) << 3)
|
||||
tail[i >> 2] |= a[i] << (i % 4 << 3)
|
||||
}
|
||||
|
||||
tail[i >> 2] |= 0x80 << ((i % 4) << 3)
|
||||
tail[i >> 2] |= 0x80 << (i % 4 << 3)
|
||||
if (i > 55) {
|
||||
md5cycle(state, tail)
|
||||
for (i = 0; i < 16; i += 1) {
|
||||
|
@ -492,7 +492,7 @@ SparkMD5.prototype.end = function(raw) {
|
|||
ret
|
||||
|
||||
for (i = 0; i < length; i += 1) {
|
||||
tail[i >> 2] |= buff.charCodeAt(i) << ((i % 4) << 3)
|
||||
tail[i >> 2] |= buff.charCodeAt(i) << (i % 4 << 3)
|
||||
}
|
||||
|
||||
this._finish(tail, length)
|
||||
|
@ -570,7 +570,7 @@ SparkMD5.prototype._finish = function(tail, length) {
|
|||
lo,
|
||||
hi
|
||||
|
||||
tail[i >> 2] |= 0x80 << ((i % 4) << 3)
|
||||
tail[i >> 2] |= 0x80 << (i % 4 << 3)
|
||||
if (i > 55) {
|
||||
md5cycle(this._hash, tail)
|
||||
for (i = 0; i < 16; i += 1) {
|
||||
|
@ -674,7 +674,7 @@ SparkMD5.ArrayBuffer.prototype.end = function(raw) {
|
|||
ret
|
||||
|
||||
for (i = 0; i < length; i += 1) {
|
||||
tail[i >> 2] |= buff[i] << ((i % 4) << 3)
|
||||
tail[i >> 2] |= buff[i] << (i % 4 << 3)
|
||||
}
|
||||
|
||||
this._finish(tail, length)
|
||||
|
@ -749,4 +749,16 @@ SparkMD5.ArrayBuffer.hash = function(arr, raw) {
|
|||
return raw ? hexToBinaryString(ret) : ret
|
||||
}
|
||||
|
||||
export default new SparkMD5()
|
||||
var _sparkIns = new SparkMD5()
|
||||
|
||||
export function md5(str) {
|
||||
_sparkIns.append(str)
|
||||
return _sparkIns.end()
|
||||
}
|
||||
|
||||
export function md5Sum(binStr) {
|
||||
_sparkIns.appendBinary(binStr)
|
||||
return _sparkIns.end()
|
||||
}
|
||||
|
||||
export default _sparkIns
|
|
@ -123,9 +123,14 @@
|
|||
|
||||
::slotted(&__toast.style-info) {
|
||||
border: 1px solid nth($cp, 3);
|
||||
background: nth($cp, 2);
|
||||
background: nth($cp, 1);
|
||||
color: nth($cgr, 3);
|
||||
}
|
||||
::slotted(&__toast.style-success) {
|
||||
border: 1px solid #b3e19d;
|
||||
background: #f0f9eb;
|
||||
color: nth($ct, 1);
|
||||
}
|
||||
::slotted(&__toast.style-warn) {
|
||||
border: 1px solid #faebb4;
|
||||
background: #fffbed;
|
||||
|
@ -763,6 +768,9 @@ Object.assign(_layer, {
|
|||
case 'error':
|
||||
ico = 'deny'
|
||||
break
|
||||
case 'success':
|
||||
ico = 'get'
|
||||
break
|
||||
default:
|
||||
ico = 'info'
|
||||
}
|
||||
|
|
|
@ -1,25 +0,0 @@
|
|||
# md5 加密组件
|
||||
|
||||
可对普通字符串和文件计算其对应的 md5 值。
|
||||
|
||||
组件符合 AMD 规范, 可使用 require 引入
|
||||
|
||||
### demo:
|
||||
|
||||
```javascript
|
||||
require(['./md5/main'], function(spark){
|
||||
|
||||
var md5 = function(buf){
|
||||
spark.appendBinary(buf)
|
||||
return spark.end()
|
||||
}
|
||||
|
||||
var file = /*...*/ //文件表单获取
|
||||
var fs = new FileReader() // Chrome, IE9+, FF, Safari
|
||||
fs.readAsBinaryString(file)
|
||||
|
||||
fs.onload = function(){ // 计算该文件的md5签名
|
||||
var sign = md5(this.result)
|
||||
}
|
||||
})
|
||||
```
|
Reference in New Issue