微信小程序记住密码,让登录解放双手

密码是用户最重要的数据,也是系统最需要保护的数据,我们在登录的时候需要用账号密码请求登录接口,如果用户勾选记住密码,那么下一次登录时,我们需要将账号密码回填到输入框,用户可以直接登录系统。我们分别对这种流程进行说明:

记住密码

在请求登录接口成功后,我们需要判断用户是否勾选记住密码,如果是,则将记住密码状态账号信息存入本地。
下次登录时,获取本地的记住密码状态,如果为true则获取本地存储的账号信息,将信息回填登录表单。
在这里插入图片描述
在这里插入图片描述

密码加密

我在这里例举两种加密方式MD5Base64
MD5:
1、不可逆
2、任意长度的明文字符串,加密后得到的固定长度的加密字符串
3、实质是一种散列表的计算方式

Base64:
1、可逆性
2、可以将图片等二进制文件转换为文本文件
3、可以把非ASCII字符的数据转换成ASCII字符,避免不可见字符
4、实质是 一种编码格式,如同UTF-8

我们这里使用Base64来为密码做加密处理。

npm install --save js-base64

引入Base64

// js中任意位置都可引入
let Base64 = require('js-base64').Base64;

可以通过encodedecode对字符串进行加密和解密

let Base64 = require('js-base64').Base64;let pwd = Base64.encode('a123456'); 
console.log(pwd);  // YTEyMzQ1Ng==let pws2 = Base64.decode('YTEyMzQ1Ng==');
console.log(pwd2);  // a123456

到这里我们对密码的简单加密和解密就完成了。
需要注意的是,Base64是可以解密的,所以单纯使用Base64进行加密是不安全的,所以我们要对Base64进行二次加密操作,生成一个随机字符串 + Base64的加密字符。

/**** @param {number} num 需要生成多少位随机字符* @return {string} 生成的随机字符 */
const randomString = (num) => {let str = "",arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];let index = null;for (let i = 0; i < num; i++) {index = Math.round(Math.random() * (arr.length - 1));str += arr[index];}return str;
}

调用randomString函数,根据你传入的数字来生成指定长度的随机字符串,然后将随机字符串与Base64生成的随机字符凭借,完成对密码的二次加密。

let pwd = randomWord(11) + Base64.encode(password); // J8ndUzNIPTtYTEyMzQ1Ng==

到这里就完成了密码加密操作。
在用户登录时,将账号密码存入本地,存入本地方式有很多,例如:CookieslocalStoragesessionStorage等,关于使用方法网上有很多,这里我们使用微信小程序的存储方式wx.setStorageSyn

// 我们这里使用微信小程序的存储方式wx.setStorageSync
let account = {username: 'test‘,password: pwd}
wx.setStorageSync('account', account)

在这里插入图片描述

二次登录

用户勾选记住密码后,第二次进入系统,直接从本地获取账号密码,对密码进行解密后回填到表单。
先判断用户是否勾选记住密码,然后对密码进行解密。

init() {let state = wx.getStorageSync('rememberMe')if (state) {let account = wx.getStorageSync('account')let Base64 = require('js-base64').Base64;let pwd = Base64.decode(account.password.slice(11))this.setData({username: account.username,password: pwd})}this.setData({ rememberMe: state })}

将解密后的数据回显到表单上,用户就可以直接登录了。

最后

关于记住密码业务,需要保证用户的密码是加密存储,这里用的是微信小程序示例,在web上的流程也是如此,你可以在vue项目中使用本文提到的方法。


如果你觉得本文章不错,欢迎点赞👍、收藏💖、转发✨哦~
阅读其它:
Git提交规范
微信小程序动态生成表单来啦!你再也不需要手写表单了!
微信小程序用户隐私API
所见即所得的动画效果:Animate.css
van-dialog弹窗异步关闭-校验表单

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Thinkphp5报错:htmlentities() expects parameter 1 to be string, array given

注意注意&#xff1a; 本文对应 ThinkPHP5.1 版本。前言 - 出现问题的原因 为避免出现 XSS 安全问题&#xff0c;Thinkphp5.1 默认变量输出都会使用 htmlentities 方法进行转义输出。 如果不想被转义输出&#xff0c;模板渲染时&#xff0c;需要在变量后面加上 raw方法&#xf…

综述--知识蒸馏

知识蒸馏&#xff08;Knowledge Distillation&#xff09;作为一种类似迁移学习的方法&#xff0c;最早是由Hinton等人在2015年提出[1]&#xff0c;在近年来得到了广泛的关注和研究。它通过将一个复杂的模型的知识转移到一个简化的模型中&#xff0c;以实现在模型大小和计算资源…

每天一道算法题(九)——寻找字符串中所有字母异位词的子串

文章目录 前言1、问题2、示例3、解决方法&#xff08;1&#xff09;方法1——双指针 总结 前言 提示&#xff1a; 1、问题 给定两个字符串 s 和 p&#xff0c;找到 s 中所有 p 的 异位词 的子串&#xff0c;返回这些子串的起始索引。不考虑答案输出的顺序。 异位词 指由相同字…

推荐一个windows上传linux服务器/linux服务器的docker镜像的工具,摆脱docker cp,以及解决常见问题。

Lrzsz&#xff0c;又称为lrz和lsz&#xff0c;是一个用于在Unix、Linux、macOS等操作系统上进行串行文件传输的工具。它支持基于X/Y/ZModem协议的文件传输&#xff0c;能够通过串口或者Telnet/SSH等网络连接进行文件传输。Lrzsz具有传输速度快、可靠性高、易于使用等特点&#…

详解ES6的Promise

ES6&#xff08;ECMAScript 6&#xff09;是JavaScript的一种标准&#xff0c;也被称为ES2015。它是在2015年发布的第六个ECMAScript标准版本&#xff0c;引入了许多新的语法和特性来增强JavaScript的功能和可读性。 文章目录 一、创建promise 二、处理Promise 三.Promise链…

OpenCV入门9——目标识别(车辆统计)

文章目录 图像轮廓查找轮廓绘制轮廓轮廓的面积与周长多边形逼近与凸包外接矩形项目总览【车辆统计】视频加载【车辆统计】去背景【车辆统计】形态学处理【车辆统计】逻辑处理【车辆统计】显示信息【车辆统计】 图像轮廓 查找轮廓 # -*- coding: utf-8 -*- import cv2 import n…

return关键字

return 是编程语言中的一个关键字&#xff0c;用于结束当前函数或方法的执行&#xff0c;并返回一个值&#xff08;如果函数有返回值的话&#xff09;。return 的作用是将程序的控制权从当前的函数或方法返回给调用方&#xff0c;并且返回一个指定的值。 在函数中的作用&#…

vue3的api使用

vue官网链接 API 全览图 createApp() // 内敛根组建import { createApp } from vueconst app createApp({})// 导入根组建import App from ./App.vueconst app createApp(App)app.mount() import { createApp } from vue const app createApp() const vm app.mount(#app…

Threejs_09 gltf模型的引入(效果初现)

本节使用到的图片、素材、gltf文件&#xff0c;都是老陈打码的原素材 支持&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#x…

口罩问题

描述 两年前的今天&#xff0c;疫情肆虐武汉&#xff0c;曾经几毛钱的一个一次性医用口罩供不应求&#xff0c;价格也是水涨船高&#xff0c;更有甚者一只口罩卖到了10元。在利益的驱使下也让一些不良商家道德涣散&#xff0c;据相关报道&#xff0c;有商家回收废弃口罩并重新…

C++:重载

运算符重载本质上就是函数重载。这里举例子是定义三维数组。下面代码是进行简单的定义&#xff0c;输出分别是000和123。 #include<iostream> using namespace std; class Vec3 { public:Vec3() :r(0), g(0), b(0){}Vec3(int _r, int _g, int _b):r(_r),g(_g),b(_b){} p…

SQL DELETE 语句:删除表中记录的语法和示例,以及 SQL SELECT TOP、LIMIT、FETCH FIRST 或 ROWNUM 子句的使用

SQL DELETE 语句 SQL DELETE 语句用于删除表中的现有记录。 DELETE 语法 DELETE FROM 表名 WHERE 条件;注意&#xff1a;在删除表中的记录时要小心&#xff01;请注意DELETE语句中的WHERE子句。WHERE子句指定应删除哪些记录。如果省略WHERE子句&#xff0c;将会删除表中的所…

ANSYS中如何手动为装配体添加接触约束教程

接触的类型&#xff1a; 在接触类型&#xff08;Type&#xff09;选项中&#xff0c;软件共提供了绑定接触&#xff08;Bonded&#xff09;、不分离接触&#xff08;No Separation&#xff09;、无摩擦接触&#xff08;Frictionless&#xff09;、粗糙接触&#xff08;Rough&a…

深入Ansible

1.什么是ansible ansible是新出现的自动化运维工具&#xff0c;基于Python开发&#xff0c;集合了众多运维工具&#xff08;puppet、chef、func、fabric&#xff09;的优点&#xff0c;实现了批量系统配置、批量程序部署、批量运行命令等功能。 ansible是基于 paramiko 开发的…

如何使用GitHub托管代码(简易版)

打开IDEA并打开你的项目。 确保你已经安装了Git&#xff0c;并且在你的计算机上设置了Git的全局用户信息&#xff08;用户名和电子邮箱地址&#xff09;。这里设置用户签名和将来登录 GitHub&#xff08;或其他代码托管中心&#xff09;的账号没有任何关系。Git 首次安装必须设…

Linux操作系统使用及C高级编程-D11-D13结构体

由一批数据组合而成的结构型数据。组成结构型数据的每个数据称为结构型数据的“成员”&#xff0c;其描述了一块内存空间的大小及解释意义。 语法&#xff1a; struct 结构体名 { 结构体成员列表 }; 下图是struct的定义和使用方法&#xff0c;其中20行这种赋值方式错误&#xf…

向pycdc项目提的一个pr

向pycdc项目提的一个pr 前言 pycdc这个项目&#xff0c;我之前一直有在关注&#xff0c;之前使用他反编译python3.10项目&#xff0c;之前使用的 uncompyle6无法反编译pyhton3.10生成的pyc文件&#xff0c;但是pycdc可以&#xff0c;但是反编译效果感觉不如uncompyle6。但是版…

BGP笔记

自治系统----AS AS划分的原因&#xff1a;如果网络太大&#xff0c;路由数量进一步增加&#xff0c;路由表规模变得太大&#xff0c;会导致路由收敛速度变慢&#xff0c;设备性能消耗加大&#xff0c;且全网设备对于路由信息的认知不同&#xff0c;造成流量通讯障碍 AS号&…

Shader的组成部分Fallback

文档 Fallback 作用 SubShader都不起作用的时候&#xff0c;使用Fallback确保有备有的shader起作用 语法 Fallback "Shader名字” 不使用备用shader Fabllback Off