微信小程序授权登录取消授权重新授权处理方法附可用代码

阳光穿透心脏的1/2处 2023-06-13 08:47 27阅读 0赞

> 微信小程序授权登录基本是小程序的标配了，但是官方的demo，取消授权后，就不能再重新点击登录，除非重新加载小程序才可以，这下怎么办？  
>   
> 我们可以先在首页引导用户点击，然后跳转到一个新的页面，在新的页面进行授权，然后新的页面授权成功，立马跳回首页，显示用户信息。

![aHR0cHM6Ly9zMi5heDF4LmNvbS8yMDE5LzExLzE0L01VOUEwTy5naWY][]

**话不多说，直接上代码**  
代码结构：

![format_png][]

## index是首页，login是授权页      **首页代码** ##

### index.wxml ###

<view wx:if="{
       {result==false}}">
      <button bindtap="getinfo" class="loginbtn"> 授权登录 </button>
    </view>
     
    
    <view elif="{
       {result==true}}" class="info">
      <image src="{
       {head}}" class="headimg"></image>
      <text class="nickname">{
       {name}}</text>
    </view>

### index.wxss ###

/**index.wxss**/
    .loginbtn{
      width: 150px;
      height: 45px;
      background: #06C05F;
      margin:100px auto 0;
      line-height: 45px;
      font-size: 15px;
      color: #fff;
    }
     
    .info{
      width: 80px;
      height: 100px;
      margin:50px auto 0;
    }
     
    .info .headimg{
      width: 80px;
      height: 80px;
      border-radius: 100%;
    }
     
    .info .nickname{
      text-align: center;
    }

### index.js ###

//index.js
    Page({
      data: {
        userInfo: {},
        hasUserInfo: false
      },
     
      //事件处理函数
      getinfo: function () {
        wx.navigateTo({
          url: '../login/index'
        })
      },
     
      onLoad: function (e) {
        let that = this;
        // 获取用户信息
        wx.getSetting({
          success(res) {
            // console.log("res", res)
            if (res.authSetting['scope.userInfo']) {
              console.log("已授权")
              // 已经授权，可以直接调用 getUserInfo 获取头像昵称
              wx.getUserInfo({
                success(res) {
                  console.log("获取用户信息成功", res)
                  that.setData({
                    name: res.userInfo.nickName,
                    head: res.userInfo.avatarUrl,
                    result: true
                  })
                },
                fail(res) {
                  console.log("获取用户信息失败", res)
                  that.setData({
                    result: "取消授权"
                  })
                }
              })
            } else {
              console.log("未授权")
              that.setData({
                result: false
              })
            }
          }
        })
      }
    })

## **授权页代码** ##

### index.wxml ###

<button open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 授权获取用户信息 </button>

### index.js ###

//index.js
    Page({
      data: {
        userInfo: {},
        hasUserInfo: false
      },
     
      getUserInfo: function (e) {
        let that = this;
        // 获取用户信息
        wx.getSetting({
          success(res) {
            // console.log("res", res)
            if (res.authSetting['scope.userInfo']) {
              console.log("已授权=====")
              // 已经授权，可以直接调用 getUserInfo 获取头像昵称
              wx.getUserInfo({
                success(res) {
                  console.log("获取用户信息成功", res)
                  that.setData({
                    name: res.userInfo.nickName,
                    head: res.userInfo.avatarUrl
                  })
                  wx.reLaunch({
                    url: '../index/index'
                  })
                },
                fail(res) {
                  console.log("获取用户信息失败", res)
                }
              })
            } else {
              console.log("未授权=====")
            }
          }
        })
      }
    })

[aHR0cHM6Ly9zMi5heDF4LmNvbS8yMDE5LzExLzE0L01VOUEwTy5naWY]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9zMi5heDF4LmNvbS8yMDE5LzExLzE0L01VOUEwTy5naWY
[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9hdHRhY2guNTJwb2ppZS5jbi9mb3J1bS8yMDE5MTEvMTMvMTYxNDI1YXZueDZtcHVuZm05MmZ6Mi5wbmc?x-oss-process=image/format,png