微信小程序——用户登录，退出，缓存（基于官方文档最新版）

官方API说明

文档地址

官方文档

授权登录

设置缓存wx.setStorageSync(string key, any data)

查看

如果你发现你有下图所示的说明设置缓存成功

获取缓存any wx.getStorageSync(string key)

移除缓存 wx.removeStorageSync(string key)

看名字就知道是移除缓存

1.最简单（不使用es6语法）

data: {
    userName:"",
    userhead:"",
    judgeLogin:false
  },

login:function(){
	let that = this;
	wx.getUserProfile({
      desc: '授权登录',
      success:function(res){
        console.log("success",res.userInfo)
        this.setData({
          userName:res.userInfo.nickName,
          userhead:res.userInfo.avatarUrl,
          judgeLogin:true
        })
      },
      fail:function(res){
        console.log("fail")
      }
    })
}

2.使用es6语法

data: {
    userName:"",
    userhead:"",
    judgeLogin:false
  },
  
  catchLogin(){
    wx.getUserProfile({
      desc: '授权登录',
      success:res=>{
        console.log("success",res.userInfo)
        this.setData({
          userName:res.userInfo.nickName,
          userhead:res.userInfo.avatarUrl,
          judgeLogin:true
        })
      },
      fail:res=>{
        console.log("fail")
      }
    })
  },

3.简化es6和逻辑的登录

wxml中

<!--pages/user/user.wxml-->
<view class="user_info_wrap" >
    <view class="user_img_wrap" wx:if="{{userinfo}}">
        <image class="user_bg" src="{{userinfo.avatarUrl}}"></image>
        <view class="user_info">
            <image class="user_icon" src="{{userinfo.avatarUrl}}"></image>
            <view class="user_name">{{userinfo.nickName}}</view>
        </view>
    </view>
    <view class="user_btn" wx:else bindtap="catchLogin">
        登录
    </view>
</view>

js中

data: {
    userinfo:''
  },
  
  catchLogin(){
    wx.getUserProfile({
      desc: '授权登录',
      success:res=>{
        console.log("success",res.userInfo)
        this.setData({
          userinfo:res.userInfo
        })
      },
      fail:res=>{
        console.log("fail")
      }
    })
  },

4.退出登录（使用es6+弹窗判断）

Logout:function(){
    if(this.data.userinfo){
      wx.showModal({
        cancelColor: 'cancelColor',
        title:'是否确定退出',
        success: res =>{
          if(res.confirm){
            console.log("用户确定退出");
            this.setData({
              userinfo:''
            })
          }else{
            console.log("用户取消了退出")
          }
        }
      })
      
    }else{
      wx.showModal({
        cancelColor: 'cancelColor',
        title:'您还未登录！',
        success:function(res){
          if(res.confirm){
            console.log("用户未登录")
          }
        }
      })
    }
    
  },

5.使用缓存技术实现保持登录状态以及登出清空缓存

清空缓存注意对应你设置的缓存名

wx.removeStorageSync('userDetails')

// pages/user/user.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    userinfo:''
  },
  
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad:function() {
    let user = wx.getStorageSync('userDetails')
    this.setData({
      userinfo:user
    })
  },
  catchLogin(){
    wx.getUserProfile({
      desc: '授权登录',
      success:res=>{
        let user = res.userInfo
        console.log("success",user)
        wx.setStorageSync('userDetails', user)
        this.setData({
          userinfo:user
        })
      },
      fail:res=>{
        console.log("fail")
      }
    })
  },

  Logout:function(){
    if(this.data.userinfo){
      wx.showModal({
        cancelColor: 'cancelColor',
        title:'是否确定退出',
        success: res =>{
          if(res.confirm){
            console.log("用户确定退出");
            this.setData({
              userinfo:''
            })
            
            wx.removeStorageSync('userDetails')
          }else{
            console.log("用户取消了退出")
          }
        }
      })
      
    }else{
      wx.showModal({
        cancelColor: 'cancelColor',
        title:'您还未登录！',
        success:function(res){
          if(res.confirm){
            console.log("用户未登录")
          }
        }
      })
    }
  },