微信小程序uniapp记住密码

记住密码功能

在请求登录接口成功后,我们需要判断用户是否勾选记住密码,如果是,则将记住密码状态、账号信息存入本地。

下次登录时,获取本地的记住密码状态,如果为true则获取本地存储的账号信息,将信息回填登录表单。

但是如果密码直接存在缓存里,很容易出问题,现在我们需要将密码做加密处理。

这里采用 base64 加密方式

base64 简单使用

1、安装 base64

shell 复制代码
npm install --save js-base64

2、引入base64

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

3、可以通过encode和decode对字符串进行加密和解密

js 复制代码
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的加密字符。

高级使用

随机字符串的生成方式

js 复制代码
/***
 * @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;
}

二次加密

shell 复制代码
let pwd = randomWord(11) + Base64.encode(password); // J8ndUzNIPTtYTEyMzQ1Ng==

加密完,将加密的密码通过微信的方法 wx.setStorageSyn 存在缓存中

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

自动登陆

js 复制代码
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 })
 }
相关推荐
流***陌40 分钟前
陪诊就医小程序中健康档案的精细化管理设计方案
小程序
明天你好26741 分钟前
如何做一个花店小程序,搭建一个小程序多少钱
微信小程序·小程序·模拟退火算法
2501_915106322 小时前
苹果软件加固与 iOS App 混淆完整指南,IPA 文件加密、无源码混淆与代码保护实战
android·ios·小程序·https·uni-app·iphone·webview
江城开朗的豌豆2 小时前
小程序登录不迷路:一篇文章搞定用户身份验证
前端·javascript·微信小程序
2501_915921432 小时前
iOS 26 崩溃日志解析,新版系统下崩溃获取与诊断策略
android·ios·小程序·uni-app·cocoa·iphone·策略模式
江城开朗的豌豆2 小时前
我的小程序登录优化记:从短信验证到“一键获取”手机号
前端·javascript·微信小程序
2501_916013745 小时前
iOS 推送开发完整指南,APNs 配置、证书申请、远程推送实现与上架调试经验分享
android·ios·小程序·https·uni-app·iphone·webview
Stanford_11069 小时前
如何利用Python进行数据分析与可视化的具体操作指南
开发语言·c++·python·微信小程序·微信公众平台·twitter·微信开放平台
2501_9159090610 小时前
HTML5 与 HTTPS,页面能力、必要性、常见问题与实战排查
前端·ios·小程序·https·uni-app·iphone·html5
知识分享小能手12 小时前
微信小程序入门学习教程,从入门到精通,微信小程序核心 API 详解与案例(13)
前端·javascript·学习·react.js·微信小程序·小程序·vue