大龄业余程序员要搞个django小程序--08--深入理解小程序登陆状态的维护

zsy888 发布于2021-09-26 09:55 / 3352人阅读

摘要：由于微信小程序没有一套身份验证管理的框架，只提供等几个，所以对于我这种初学者来说，小程序登陆状态管理就显得很麻烦。按照个人的理解，需要携带。总之，和只要其中之一不存在，都要把登陆状态标记为未登陆。不然用户不清楚不确定是否登陆成功。

业余水平第一次做小程序，进度非常慢，每天下班后也只有零碎的1到2小时，一个小问题可以难倒我几个晚上的时间。

由于微信小程序没有一套身份验证管理的框架，只提供wx.login、wx.getUserProfile等几个api，所以对于我这种初学者来说，小程序登陆状态管理就显得很麻烦。经过这段时间的实践，终于摸到了点门槛。先梳理几个重要的信息。

从用户使用的层面理解小程序的登陆逻辑

小程序打开时，只会有两种状态

未登陆状态，查看不到个人信息
登陆状态

那，当小程序载入时，依靠什么来判断状态呢？结合官方的文档和实践，我采用以下的逻辑判断登陆状态的设定：

1、sessionKey 是否过期，
2、本地是否有userInfo

经过实践，以上两项，只要有一项不满足，都必须显性地标识为未登陆。sessionKey都过期了，说明这个用户很久没登陆小程序了，有必要走一套登陆的流程，或者，本地连userInfo都没来，即便标识为登陆，也没用，没有基础的用户数据的话，你显示个毛线。

从开发的层面理解小程序的登陆逻辑

用户为两种状态

已注册
未注册

需要考虑以下情况

请求中是否需要携带token，无token则需要验openid，然后签发token；token过期时通知小程序客户端重新执行登陆操作
请求中是否需要携带code iv encryptedData 。按照个人的理解，需要携带。即wx.login(提供code)和getUserInfo(提供iv和encryptedData)配合使用，可以随时做openid校验和解密encryptedData信息。

总结

1、小程序客户端使用sessionKey 或 userInfo缓存来决定用户在小程序的登陆状态；
而且，都可以在全局进行判断，即项目根目录的app.js

App({	wx.checkSession({      success: (res) => {//返回:有效期内的提示},      fail: (res) => {//返回:过期的提示},      complete: (res) => {},    });        let u = wx.getStorageSync("userInfo")    console.log(u) //如果不存在，返回的是空字符    })

上面并非业务代码，只是做简单的展示，实践中可以考虑使用promise封装起来。

总之，sessionKey和userInfo只要其中之一不存在，都要把登陆状态标记为未登陆。

2、需要把登陆逻辑多带带封装，方便在需要的时候使用。

export const wxGetUserProfile = () => {  return new Promise((resolve, reject) => {    // 登陆中提示    wx.showLoading({      title: "登陆中...",      mask: true,    })    wx.getUserProfile({      desc: "授权以提供进一步服务",      lang: "zh_CN",      success: (result) => {        resolve(result)      },      fail: (err) => {        reject(err)      },      complete: (res) => {        wx.hideLoading({})      },    })  })}export const wxLogin = () => {  return new Promise((resolve, reject) => {    wx.login({      success: (result) => {        resolve(result)      },      fail: (err) => {        reject(err)      },      complete: (res) => {      },    })  })}

使用Promise分别封装wx.login和wx.getUserProfile，使用时要在使用的js中引入封装的方法）

tapToLogin(e) {    let p1 = wxLogin()    let p2 = wxGetUserProfile()    p1.then(code => {      return code    }).then(code => {      return new Promise((resolve, reject) => {        p2.then(res => {          console.log("profile", res.userInfo);          this.setData({            userInfo: res.userInfo          })          wx.setStorageSync("userInfo", res.userInfo)          resolve({            code: code.code,            iv: res.iv,            encryptedData: res.encryptedData,            userInfo: res.userInfo          })        }).catch(err => {          reject(err)        })      })    }).then(res => {      // 使用封装的request      if (!wx.getStorageSync("token")) {        request({            url: HOST_API.menberLogin,            method: "POST",            data: {              code: res.code,              iv: res.iv,              encryptedData: res.encryptedData            }          })          .then(result => {            wx.setStorageSync("token", result.data.context.token);            this.setData({              hasUserInfo: true,              isLogin: result.data.context.is_login,              isVip: result.data.context.is_vip,              collection: result.data.context.collection,              integration: result.data.context.integration,              views: result.data.context.views            })            console.log("无头的返回：", result);          })      } else {        request({            url: HOST_API.menberLogin,            method: "POST"          })          .then((result) => {            console.log("有token的返回：", result);            this.setData({              hasUserInfo: true,              isLogin: result.data.context.is_login,              isVip: result.data.context.is_vip,              collection: result.data.context.collection,              integration: result.data.context.integration,              views: result.data.context.views            })          })      }    })  },

未登陆状态

登陆状态

当然，在使用时还是存在逻辑上不清晰的情况。

3、设置的问题

将isLogin bool设置为全局变量，注意这个不能设置为缓存。
将wx.checkSession和wx.getStorageSync("userInfo") 封装好，可以在全局调用，可以在需要的环节进行调用，并且，必须相应地改更全局变量isLogin的值。
token和userInfo要写到缓存中
可以写一个登陆页面的模板，供各个页面调用。当然，不写模版似乎也没啥问题，但必须，当前的界面在点击授权登陆后，要有显性的提示：登陆完成云云。不然用户不清楚、不确定是否登陆成功。

云服务器 GPU云服务器小程序附近的小程序个人小程序和公司小程序的区别一个教你开发小程序的小程序小程序的用途

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/121117.html

大龄业余程序员要搞个django小程序--09--小程序登陆状态维护之个人中心如何做数据加载

摘要：个人中心如何加载数据截图中，显性的数据有登陆我的积分浏览历史我的收藏年会会员成为会员时则显示会员到期时间以上几个数据都是显性的，即登陆后就要立刻显示的。那么这个页面数据的加载应这样设计。 ...

gitmilk 2021-09-28 09:36 评论0 收藏0
30 岁的安卓程序员还有出路吗，应该怎么规划？

摘要：在舒伯的生涯阶段里有个确立阶段，岁岁。知识技术安卓程序员需要掌握编程语言应用框架开发工具等这些具体的知识和技术。技术能力与阅历对安卓程序员来讲，知识技术是一方面，是容易习得的，是较浅的层面。大龄程序员的界定老早网上有人说，安卓开发干不过30岁，后来又有人说干不过35岁，后来又有人说干不过...

不知名网友 2021-11-26 11:11 评论0 收藏0
Django搭建个人博客：结束和开始

摘要：教程看到这里，你已经学会如下内容搭建开发环境博文管理用户管理发表评论若干小功能搭建简单的小博客，以上的功能够用了。教程为了起步平缓，没有展开这方面的内容。陌生人，祝你学业进步事业有成欢迎常到杜赛的个人网站做客教程看到这里，你已经学会如下内容：搭建开发环境博文管理用户管理发表评论若干小功能搭建简单的小博客，以上的功能够用了。相信你的志向不止于此。毕竟程序员面试个个造火...

zqhxuyuan 2019-07-30 18:42 评论0 收藏0
从国企到互联网，一个初入职场将近一年半工作经验程序员的「得」与「失」

摘要：写在前面年月日，我只身一人来到北京，开始人生中的第一份工作，在一家国企从事软件开发工作。因为现在晚饭都是在公司吃，如果不是刷朋友圈，我是不知道北京哪天的夕阳又刷屏了的，因此错过了很多美丽的瞬间，也算一点遗憾吧。 ...

不知名网友 2021-11-26 11:11 评论0 收藏0
HTML5行业现状与未来 - 2016年终大盘点

摘要：行业现状与未来年终大盘点大幅动荡后，即将进入平稳期前端，在年及以前，一直处于一种萌芽期的状态当中，直至年才进入行业的成长期。 HTML5行业现状与未来 - 2016年终大盘点 1. 大幅动荡后，即将进入平稳期 HTML5（WEB前端），在2012年及以前，一直处于一种萌芽期的状态当中，直至2013年才进入行业的成长期。HTML5（WEB前端）在2013和2014年，随着行业的推动慢慢的...

mmy123456 2019-08-20 14:20 评论0 收藏0