这是我弄得一点源码
使用 js 记住密码 选了半天最后 选择了 js.cookie.min.js 实现的 当然 也加了一点 加密手段 用的 crypto-js 这个 自己封装了一下 感觉还行 以后能重复用的 二话不说 先放资源 :
这么多资源 不得给个赞 关注一下的
当然 最简单的就是
localStorage 令牌
直接存就可以了
// 将令牌存储到localStorage
localStorage.setItem('auth_token', token);
// 从localStorage获取令牌
const storedToken = localStorage.getItem('auth_token');
// 删除之前存储的数据项
localStorage.removeItem('name');
// 在请求头中添加令牌
const headers = {
'Authorization': `Bearer ${storedToken}`
};
// 发送请求到服务器进行验证
fetch('/protected-resource', {
method: 'GET',
headers: headers
})
.then(response => {
// 处理响应
})
.catch(error => {
// 处理错误
});
// 假设你有一个函数来检查令牌是否即将过期
function isTokenExpiringSoon(token) {
// 根据令牌中的有效期信息判断
// ...
return true; // 或 false
}
// 刷新令牌的函数
function refreshToken(oldToken) {
// 发送请求到服务器的令牌刷新端点
return fetch('/refresh-token', {
method: 'POST',
headers: {
'Authorization': `Bearer ${oldToken}`
}
})
.then(response => response.json())
.then(data => {
const newToken = data.token;
localStorage.setItem('auth_token', newToken);
return newToken;
});
}
// 在适当的时候调用刷新令牌函数
const token = localStorage.getItem('auth_token');
if (isTokenExpiringSoon(token)) {
refreshToken(token)
.catch(error => {
// 处理错误,可能需要用户重新登录
});
}
crypto-js.js
crypto-js.js https://gitee.com/waiterdtfhdt/crypto-js.git加一个直接复制源码
https://cdn.jsdelivr.net/npm/crypto-js@4.2.0/crypto-js.js
可以自己下载 顺便关注一下啊
我自己有一个专门介绍的 可以去可以去看看
【CryptoJS】使用介绍-CSDN博客CryptoJS是一个JavaScript的加解密的工具包。哈希散列,进行加解密。https://blog.csdn.net/weixin_52208686/article/details/138237763 官网地址 : https://code.google.com/archive/p/crypto-js/
//AES 加密语法
CryptoJS.AES.encrypt('待加密字符串', '密钥').toString()
//AES 解密语法
CryptoJS.AES.decrypt('待解密字符串', '密钥').toString(CryptoJS.enc.Utf8)
//案例1:文本加解密
//加密
//ciphertext 密文:经加密函数处理后的数据
const ciphertext = CryptoJS.AES.encrypt('my message', 'secret key').toString()
//解密
//plaintext 明文:没有经过加密的数据
const plaintext = CryptoJS.AES.decrypt(ciphertext, 'secretkey').toString(CryptoJS.enc.Utf8)
//案例2:对象加解密
//原始数据
const arr = [{id: 1}, {id: 2}]
const strArr = JSON.stringify(arr)
//加密
const ciphertext = CryptoJS.AES.encrypt(strArr, 'secret key').toString()
//解密
const plaintext = CryptoJS.AES.decrypt(ciphertext,'secretkey').toString(CryptoJS.enc.Utf8)
const plaintextArr = JSON.parse(plaintext)
js.cookie.min.js
// 假设我们有一个加强的加密算法函数 encrypt 和解密算法函数 decrypt
function encrypt(password) {
// 这里应该使用真正的加密算法,例如AES,并结合安全的密钥管理
// 示例中仅使用了一个简单的伪加密算法
const salt = 'some-random-salt'; // 应该是一个随机且保密的盐值
const encrypted = password + salt; // 示例中的“加密”只是简单拼接了一个盐值
return btoa(unescape(encodeURIComponent(encrypted))); // 使用base64编码
}
function decrypt(encryptedPassword) {
// 这里应该使用与encrypt函数中相同的解密算法和密钥
// 示例中的“解密”只是简单移除盐值并解码
const decoded = decodeURIComponent(escape(atob(encryptedPassword)));
const salt = 'some-random-salt'; // 必须与加密时使用的盐值相同
const decrypted = decoded.replace(salt, ''); // 示例中的“解密”只是简单移除盐值
return decrypted;
}
// 存储加密后的密码
function storeEncryptedPassword(password) {
const encryptedPassword = encrypt(password);
Cookies.set('encryptedPassword', encryptedPassword);
}
// 获取并解密存储的密码
function getDecryptedPassword() {
const encryptedPassword = Cookies.get('encryptedPassword');
if (encryptedPassword) {
return decrypt(encryptedPassword);
}
return null;
}
// 示例用法:
const userPassword = 'myPassword123'; // 用户的明文密码
storeEncryptedPassword(userPassword); // 存储加密后的密码
const decryptedPassword = getDecryptedPassword(); // 获取并解密密码
console.log(decryptedPassword); // 输出:myPassword123
https://code.google.com/archive/p/crypto-js/
三个 可以自己下载
jquery.cookie.js
这个 不是很推荐 主要是 没人维护了
jQuery.cookie = function (name, value, options) {
if (typeof value != 'undefined') { // name and value given, set cookie
options = options || {};
if (value === null) {
value = '';
options.expires = -1;
}
var expires = '';
if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {
var date;
if (typeof options.expires == 'number') {
date = new Date();
date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
} else {
date = options.expires;
}
expires = '; expires=' + date.toUTCString(); // use expires attribute, max-age is not supported by IE
}
var path = options.path ? '; path=' + options.path : '';
var domain = options.domain ? '; domain=' + options.domain : '';
var secure = options.secure ? '; secure' : '';
document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join('');
} else { // only name given, get cookie
var cookieValue = null;
if (document.cookie && document.cookie != '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) == (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
};
使用 :
- 引入 jQuery 和 jQuery Cookie 插件
在你的 HTML 文件中,首先引入 jQuery,然后引入 jQuery Cookie 插件。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script> |
- 设置 Cookie
使用 $.cookie
方法来设置一个 cookie。你可以指定名称、值和选项(如过期时间、路径、域等)。
$.cookie('name', 'value', { expires: 7, path: '/' }); // 设置一个名为 'name' 的 cookie,值为 'value',7 天后过期 |
- 读取 Cookie
要读取一个 cookie,只需使用 $.cookie
方法并提供 cookie 的名称。
var cookieValue = $.cookie('name'); // 读取名为 'name' 的 cookie 的值 |
- 删除 Cookie
要删除一个 cookie,你可以通过设置过期日期为一个过去的时间来删除它。
$.cookie('name', null, { path: '/' }); // 删除名为 'name' 的 cookie |
cookieSave.js
cookieSave.js 接下来 就是我自己封装的 拿过来可以直接使用
// 生成随机 AES 密钥的函数
function generateRandomKey() {
const key = window.crypto.getRandomValues(new Uint8Array(32));
return CryptoJS.lib.WordArray.create(key);
}
// 生成随机
function generateRandomString(length) {
const key = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!~@#$%^&*()_+-=';
let result = '';
const charactersLength = key.length;
for (let i = 0; i < length; i++) {
result += key.charAt(Math.floor(Math.random() * charactersLength));
}
return result;
}
// 加密数据的函数
function encryptData(data, secretKey) {
const ciphertext = CryptoJS.AES.encrypt(JSON.stringify(data), secretKey ).toString();
return ciphertext;
}
// 解密数据的函数
function decryptData(ciphertext, secretKey) {
const bytes = CryptoJS.AES.decrypt(ciphertext, secretKey);
const originalData = JSON.parse(bytes.toString(CryptoJS.enc.Utf8));
return originalData;
}
// 存储加密数据到cookie的函数
function storeEncryptedCredentials(loginNumber, loginPass, secretKey , lastTime) {
const expirationDate = new Date(lastTime);
expirationDate.setDate(expirationDate.getDate() + 2);
const encryptedData = encryptData({ loginNumber, loginPass }, secretKey);
Cookies.set('encryptedERPonWMSCredentials', encryptedData , { expires: expirationDate });
Cookies.set('secretERPonWMSCKey', secretKey.toString() , { expires: expirationDate }); // 也可以存储密钥供之后解密使用
}
// 从cookie读取并解密数据的函数
function getDecryptedCredentials() {
const encryptedData = Cookies.get('encryptedERPonWMSCredentials');
const secretKey = Cookies.get('secretERPonWMSCKey');
if (encryptedData && secretKey) {
try {
const decryptedData = decryptData(encryptedData, secretKey);
return decryptedData;
} catch (error) {
erryor();
// 清理无效的加密数据和密钥
Cookies.remove('encryptedERPonWMSCredentials');
Cookies.remove('secretERPonWMSCKey');
console.error('Error decrypting credentials:', error);
return null;
}
}
return null;
}
// 尝试自动填充登录表单的函数
function tryAutoFillLoginForm() {
const credentials = getDecryptedCredentials();
if (credentials) {
document.getElementById('LoginNumber').value = credentials.loginNumber;
document.getElementById('password').value = credentials.loginPass;
}
}
// 暴露给HTML调用的函数
function setAndEncryptCookie(loginNumber, loginPass , LastUpdateTime ) {
const secretKey = generateRandomString(16);
storeEncryptedCredentials(loginNumber, loginPass, secretKey ,LastUpdateTime);
}