微信小程序uniapp记住密码

这篇具有很好参考价值的文章主要介绍了微信小程序uniapp记住密码。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

记住密码功能

在请求登录接口成功后,我们需要判断用户是否勾选记住密码,如果是,则将记住密码状态、账号信息存入本地。
下次登录时,获取本地的记住密码状态,如果为true则获取本地存储的账号信息,将信息回填登录表单。
但是如果密码直接存在缓存里,很容易出问题,现在我们需要将密码做加密处理。
这里采用 base64 加密方式

base64 简单使用

1、安装 base64

npm install --save js-base64

2、引入base64

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

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

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

二次加密

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

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

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

微信小程序记住密码,知识点,前端,微信小程序,uni-app,小程序文章来源地址https://www.toymoban.com/news/detail-779062.html

自动登陆

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

到了这里,关于微信小程序uniapp记住密码的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 又省时间又省心,微信小程序记住密码功能大揭秘

    微信小程序已经成为现代人生活中不可或缺的一部分,但是每次打开小程序都需要重新输入密码,这让人感到有些麻烦。那么,如何实现微信小程序记住密码呢?本文将为大家详细介绍。 其实实现的核心思路非常简单,就是通过 wx.setStorageSync() 与 wx.getStorageSync() 方法在登录后

    2024年02月12日
    浏览(40)
  • 持续不断更新中... 自己整理的一些前端知识点以及前端面试题,包括vue2,vue3,js,ts,css,微信小程序等

    答: 在普通的前端项目工程中,在script标签中增加setup即可使用api 使用setup()钩子函数 答: 不要在计算属性中进行异步请求或者更改DOM 不要直接修改computed的值 区别: 计算属性值基于其响应式依赖被缓存,意思就是只要他之前的依赖不发生变化,那么调用他只会返回之前缓

    2024年02月11日
    浏览(58)
  • uniapp和小程序如何分包,详细步骤手把手(图解,前端高级开发岗必问知识点

    二、uniapp分包小程序 App默认为整包。兼容小程序的分包配置。其目的不用于下载提速,而用于首页是vue时的启动提速。 这是我分包小程序之后的目录结构 components:公共组件(供主包引用) page_后跟拼音的都是分包 分包里的components是单个分包自己的组件目录,分包vue页面的引

    2024年04月13日
    浏览(45)
  • 商用密码应用安全性评估从业人员考核知识点

    1. 密码政策法规(占比10%) 1.1党和国家关于密码工作的方针政策 1.2密码法律法规与规范性文件 1.3涉及密码的网络安全相关法律法规 1.4密码应用政策文件 2. 密码技术基础及相关标准(占比20%) 2.1密码学基础知识 2.2分组密码 2.3序列密码 2.4杂凑密码 2.5公钥密码 2.6实体鉴别协

    2024年02月04日
    浏览(57)
  • uniapp微信小程序-项目实战修改密码

     图标是使用uview里面的图标,icfont也可以

    2024年02月22日
    浏览(45)
  • 小程序知识点

    catchtap=\\\"stop\\\"阻止冒泡与捕获 stop(){} bind事件绑定不会阻止冒泡事件向上冒泡,catch事件绑定可以阻止冒泡事件向上冒泡。 如在下边这个例子中,点击 inner view 会先后调用handleTap3和handleTap2(因为tap事件会冒泡到 middle view,而 middle view 阻止了 tap 事件冒泡,不再向父节点传递),点

    2024年02月04日
    浏览(33)
  • 【小程序】常用方法、知识点汇总1

    欢迎来到《小5讲堂》 这是《小程序》系列文章,每篇文章将以博主理解的角度展开讲解, 温馨提示:博主能力有限,理解水平有限,若有不对之处望指正! 最近在开发微信小程序,时间久了总会把一些常用的方法忘记了, 因此这篇文章汇总下一些接触到且容易忘记的知识

    2024年04月11日
    浏览(53)
  • 【Unity知识点详解】自定义程序集

            今天来介绍一下Unity中的自定义程序集。在项目开发中我们经常接触到第三方插件的程序集,如DOTween、Newtonsoft.Json等。         使用自定义程序集有这么几个好处: 方便代码的的复用。当某一功能模块需要在多个项目中重复使用时,可以将代码编译成程序集,将程

    2024年02月19日
    浏览(43)
  • Android核心知识点,小程序FMP优化实录

    面试问题还记得一些,一部分已经忘记了,为了防止再忘记,所以写出来。 1:你是如何理解Android操作系统的。 2:是否熟悉framework层,如果熟悉,那就对framework做个简介。 3:是否熟悉多线程,如果熟悉,介绍下线程。 4:对象锁和类锁是否会互相影响,会举例子让你判断锁

    2024年04月11日
    浏览(32)
  • uniapp自定义输入框,实现验证码输入框、密码输入框、兼容微信小程序

    前言 在移动端或者小程序项目中,验证码输入框、密码输入框也是很常见的,今天我们就来实现一个这样的效果。 图片展示 代码实现 我这里是用uniapp实现的可兼容微信小程序。 大家如果需要微信小程序也可以参考此案例,实现思路都是一样的。 总结 这里遇到一个小小的坑

    2024年02月05日
    浏览(56)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包