微信小程序开发之——token不过期自动登录

一 概述

  • 通过手机号登录后,获取用户token,并将token保存到Storage中
  • token的有效期是一天,token失效后,自动跳转到登录接口,并获取最新token
  • token没有失效时,从小程序搜索进入,不需要登录了

二 实现原理过程

  • 登录成功时,根据登录成功的时间,计算过期时间,并将过期日期保存到Storage中
  • 每次进入时,从Storage中获取保存的过期时间和当前时间进行比较
  • 当前时间小于Storage中保存的过期时间,不需要登录
  • 当前时间大于Storage中保存的过期时间,跳转登录页面,进行登录

三 代码

3.1 登录成功后,保存过期时间

过期时间工具类(获取到date+1)
const expireTime = date => {
  const year = date.getFullYear()
  const month = date.getMonth() + 1
  const day = date.getDate()+1 //过期时间,当前日期-天数+1
  const hour = date.getHours()
  const minute = date.getMinutes() 
  const second = date.getSeconds()

  return `${[year, month, day].map(formatNumber).join('-')} ${[hour, minute, second].map(formatNumber).join(':')}`
}
const formatNumber = n => {
  n = n.toString()
  return n[1] ? n : `0${n}`
}

module.exports = {
  expireTime
}
保存过期时间
 var expreTime=util.expireTime(new Date())
 console.log(expreTime);
 wx.setStorageSync('expreTime', expreTime);

3.2 app.js中获取过期时间和登录时间进行比较

 var expreTIme= wx.getStorageSync('expreTime')
 var date1=new Date(expreTIme)
 var long1=date1.getTime();
 var long2=new Date().getTime();
 if(long1<long2){
      wx.showToast({
        title: 'token过期了',
      })
 wx.navigateTo({
         url: '/pages/login/login',
      })
   }else{
    //不过期
  }
### 创建微信小程序登录页面的方法 #### 获取 AppID 和配置项目 为了创建微信小程序,需前往微信小程序官网注册开发者账号并创建应用来获得必要的 AppID。此过程涉及通过微信扫描二维码完成账户注册,并提交有关新应用程序的一些基础详情,比如名称、简介以及图标等信息[^1]。 #### 设计用户授权登录机制 设计登录逻辑时,应考虑利用微信提供的接口让用户同意授予必要权限给小程序使用其个人信息。这一步骤对于构建安全可靠的用户体验至关重要[^2]。 #### 构建前端交互组件 在实际编码阶段,可以按照如下方式组织代码结构: - **WXML 文件** 使用 WXML 来定义视图层布局,包括按钮和其他 UI 控件。 ```xml <!-- login.wxml --> <view class="container"> <button bindtap="getUserProfile">点击登录</button> </view> ``` - **WXSS 文件** 定义样式规则使界面美观易用 ```css /* login.wxss */ .container { display: flex; justify-content: center; align-items: center; } ``` - **JS 文件** 编写业务逻辑处理函数,在其中调用微信 API 获取用户资料,并将其展示于界面上;同时把获取到的数据存储至本地缓存以便后续操作。 ```javascript // login.js Page({ getUserProfile() { wx.getUserProfile({ desc: '用于完善会员资料', // 声明获取数据后的用途 success(res) { const userInfo = res.userInfo; // 显示用户头像昵称 this.setData({ avatarUrl: userInfo.avatarUrl, nickName: userInfo.nickName }); // 存储用户信息到本地 try { wx.setStorageSync('userInfo', JSON.stringify(userInfo)); // 发送 POST 请求换取 code 及 token 并保存 // 这里省略具体网络请求部分... // 刷新当前页面状态 this.updateUIAfterLogin(); } catch (e) {} } }); }, updateUIAfterLogin(){ // 隐藏未登录状态下显示的内容,切换成已登录的状态下应该呈现的东西 } }) ``` #### 后端验证与会话管理 从前端收集来的临时凭证 `code` 应该被传递回服务器侧做进一步的身份认证工作——即交换 session_key 或 access_token 等长期有效的令牌。这些密钥允许服务端代表客户端执行某些受限动作而必每次都重新询问用户的许可。 一旦成功建立了这种信任关系,则可以在一段时间内保持在线连接直到过期或显式登出为止[^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值