js 实现记住密码功能

最新推荐文章于 2024-05-03 11:08:18 发布

小二·

最新推荐文章于 2024-05-03 11:08:18 发布

阅读量841

点赞数 11

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_52208686/article/details/138237463

版权

这是我弄得一点源码

使用 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

js 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);
}