js 实现记住密码功能

这是我弄得一点源码 

使用 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  icon-default.png?t=N7T8https://gitee.com/waiterdtfhdt/crypto-js.git加一个直接复制源码   icon-default.png?t=N7T8https://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;
    }
};

使用 :

  1. 引入 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>
  1. 设置 Cookie

使用 $.cookie 方法来设置一个 cookie。你可以指定名称、值和选项(如过期时间、路径、域等)。

$.cookie('name', 'value', { expires: 7, path: '/' }); // 设置一个名为 'name' 的 cookie,值为 'value',7 天后过期
  1. 读取 Cookie

要读取一个 cookie,只需使用 $.cookie 方法并提供 cookie 的名称。

var cookieValue = $.cookie('name'); // 读取名为 'name' 的 cookie 的值
  1. 删除 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);
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/577390.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

拖拽式工作流开发有什么突出优势?

想要实现高效率的办公方式&#xff0c;可以试着了解低代码技术平台及拖拽式工作流开发的优势特点。具有好操作、好维护、够灵活、可视化界面操作等优势特点的低代码技术平台可以助力企业实现流程化办公&#xff0c;在发展越来越快速的今天&#xff0c;拖拽式工作流开发得到了很…

陪丨玩丨系丨统前后端开发流程,APP小程序H5前后端源码交付支持二开!多人语音,开黑,线上线下两套操作可在一个系统完成!

100%全部源码出售 官网源码APP源码 管理系统源码 终身免费售后 产品免费更新 产品更新频率高 让您时刻立足于行业前沿 软件开发流程步骤及其作用&#xff1a; 软件开发是一个复杂而系统的过程&#xff0c;涉及多个环节&#xff0c;以下是软件开发的主要流程步骤及其作用…

小程序使用阿里巴巴矢量图标库

一、登录官网 www.iconfont.cn 二、在搜索框中搜索想要的图标&#xff0c;将鼠标移动到图标上会看到三个标记 可以使用下载&#xff0c;直接使用&#xff1a; 可以使用css文件使用&#xff1a; 首先点击购物车样式的选项&#xff0c;而后点击下图位置&#xff1a; 点击自己创…

怎么排查K8S容器当中的Java程序内存泄露问题

今天早上发现生产线其中的一个服务在凌晨的时候突然重启了&#xff0c;内存突然从1G升到1.8G&#xff0c;CPU使用量从0.1升到了0.28&#xff0c;说明在这个时间点&#xff0c;内存突增达到了限额以上&#xff0c;服务重启了。因为这个服务布署了多节点&#xff0c;这次重启对业…

实验7:路由冗余协议HSRP配置管理(课内实验以及解答)

实验目的及要求&#xff1a; 理解首跳冗余协议&#xff08;FHRP&#xff09;的工作原理&#xff0c;掌握热备份路由器协议 (HSRP)&#xff08;思科私有协议&#xff09;原理和配置。能够实现网络终端设备虚拟网关的配置和网络故障的灵活切换&#xff0c;完成相应网络的联通性测…

ubuntu samba 安装与配置

ubuntu samba 安装与配置 一&#xff1a;安装二&#xff1a;添加samba访问账号及密码三&#xff1a;修改配置文件四&#xff1a;重启服务五&#xff1a;登录 一&#xff1a;安装 sudo apt update sudo apt install samba samba-common二&#xff1a;添加samba访问账号及密码 …

链表与模拟LinkedList的实现

1. ArrayList的缺陷 ArrayList底层使用数组来存储元素 由于其底层是一段连续空间&#xff0c;当在ArrayList任意位置插入或者删除元素时&#xff0c;就需要将后序元素整体往前或者往后 搬移&#xff0c;时间复杂度为O(n)&#xff0c;效率比较低。因此ArrayList不适合做任意位…

Restful API 具体设计规范(概述)

协议 https 域名 https://www.baidu.com/api 版本 https://www.baidu.com/v1 路径 https://www.baidu.com/v1/blogs 方法 数据过滤 状态码返回结果 返回的数据格式 尽量使用 JSON&#xff0c;避免使用 XML。 总结&#xff1a; 看 url 就知道要什么看 http method 就知道干…

【面试经典 150 | 二叉树】二叉搜索树迭代器

文章目录 写在前面Tag题目来源解题思路方法一&#xff1a;中序遍历到数组方法二&#xff1a;迭代 写在最后 写在前面 本专栏专注于分析与讲解【面试经典150】算法&#xff0c;两到三天更新一篇文章&#xff0c;欢迎催更…… 专栏内容以分析题目为主&#xff0c;并附带一些对于本…

记录wordpress网站搭建及当天被SEO优化收录

网站是前不就前搭建的&#xff0c;但是一直没有做SEO优化&#xff0c;今天花了点时间做下优化。记录下&#xff0c;喜欢的朋友点赞收藏下。 1.wordpress后台下载插件Yoast SEO插件&#xff0c;setting中搜索XML sitemaps&#xff0c;点view the XML sitemap&#xff0c;暂时不…

【Ant-Desgin 头像上传框】限制数量为1张图片,base64,其他需求可以改我组件中的代码

Ant-Desgin 头像上传框 样式图参数主要代码UpLoad 组件父组件 样式图 图片数量限制为1&#xff0c;当选择了图片后&#xff0c;需要切换图像时需点击头像完成切换 参数 /*** description: 图片上传组件* param {*} action: 上传地址* param {*} width: 宽度* param {*} height…

【网络技术】【Kali Linux】Wireshark嗅探(十一)以太网Ethernet协议报文捕获及分析

往期 Kali Linux 上的 Wireshark 嗅探实验见博客&#xff1a; 【网络技术】【Kali Linux】Wireshark嗅探&#xff08;一&#xff09;ping 和 ICMP 【网络技术】【Kali Linux】Wireshark嗅探&#xff08;二&#xff09;TCP 协议 【网络技术】【Kali Linux】Wireshark嗅探&…

Eagle for Mac:强大的图片管理工具

Eagle for Mac是一款专为Mac用户设计的图片管理工具&#xff0c;旨在帮助用户更高效、有序地管理和查找图片资源。 Eagle for Mac v1.9.2中文版下载 Eagle支持多种图片格式&#xff0c;包括JPG、PNG、GIF、SVG、PSD、AI等&#xff0c;无论是矢量图还是位图&#xff0c;都能以清…

SnapGene Mac v5.3.1中文激活版:综合性分子生物学软件

SnapGene Mac是一款功能全面、操作便捷的综合性分子生物学软件&#xff0c;专为Mac用户打造。它集成了DNA序列编辑、分析、可视化和团队协作等多种功能&#xff0c;为科研人员提供了一个高效、可靠的分子生物学研究工具。 SnapGene Mac v5.3.1中文激活版下载 在SnapGene Mac中&…

Spring Boot 3.2.5 集成 MyBatisPlus

前置条件&#xff0c;先连接好数据库&#xff0c;并且数据库里新建表插入几条数据 连接mysql传送门 版本 Spring Boot 3.2.5 第一步&#xff0c;添加依赖 <dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-spring-boot3-start…

短视频矩阵营销系统 poihuoqu 任意文件读取漏洞复现

0x01 产品简介 短视频矩阵营销系统是由北京华益云数据科技有限公司开发的一款产品,这家公司专注于抖音短视频矩阵营销系统的研发,致力于为企业提供全方位的短视频营销解决方案。华益云抖销短视频矩阵系统可以帮助企业快速搭建多个短视频账号,实现内容的批量制作和发布,提高…

vue echarts折线图 折线堆积图和折线面积图

vue echarts折线图 折线堆积图和折线面积图 1、折线堆积图和折线面积图的结合&#xff1b; 上代码 <template><section><divid"performaceLineChart"ref"performaceLineChartRef"style"width: 100%; height: 500px"></d…

CasinoRoyale靶机练习实践报告

CasinoRoyale靶机练习实践报告 下载地址: https://drive.google.com/open?id1FYP246L63zShV00wOckAQ5F5XJ4HkZ0Lhttps://download.vulnhub.com/casinoroyale/CasinoRoyale.ovahttps://download.vulnhub.com/casinoroyale/CasinoRoyale.ova.torrent ( Magnet) 1 安装靶机 …

分布式WEB应用中会话管理的变迁之路

Session一词直译为“会话”&#xff0c;意指有始有终的一系列动作&#xff0f;消息。Session是Web应用蓬勃发展的产物之一&#xff0c;在Web应用中隐含有“面向连接”和“状态保持”两个含义&#xff0c;同时也指代了Web服务器与客户端之间进行状态保持的解决方案。 在Web应用…

018基于SSM的音乐系统网站

018基于SSM的音乐系统/网站 开发环境&#xff1a; Jdk7(8)Tomcat7(8)MysqlIntelliJ IDEA(Eclipse)Maven 数据库&#xff1a; MySQL 技术&#xff1a; SpringSpring mvcMybatisJqueryVideo jsJSPJSTLEasyUI 适用于&#xff1a; 课程设计&#xff0c;毕业设计&#xff0c;学习…
最新文章