小程序登录授权的流程

小程序登录授权的流程

首先我先在页面上完成一个登录的和未登录的布局样,这是未登录的样子

2.登录的样子

首先我们先在js文件中的data里面写一个方法 userinfo: {}

然后我们使用

 <!-- 以登录-->

    <view class="box_yes" wx:if="{{userInfo.avatarUrl}}">未登录的布局样式</view>

<!--  未登录 -->

<view class="box_no" wx:else>未登录的布局样式</view>

以上就是我们布局的样式方法

 

---

下面我们来完成登录的方法逻辑,js

首先我们先写一个登录按钮,点击的时候跳转另一个登录授权页面

<view class="box_no" wx:else>
      <navigator  class="zong" url="/pages/login/login">
        登录
      </navigator>
    </view>

下面这个是跳转登录授权页面的效果

我们可以利用button按钮自带的一些属性获取用户的信息open-type="getUserInfo"  这是第一种方法

然后再js中的逻辑代码

handleGetUserInfo(e) {
    console.log(e)
    // 存放到缓存中
    const {
      userInfo
    } = e.detail;
    wx.setStorageSync("userInfo", userInfo);
    wx.navigateBack({
      delta: 1
    });
  },

第二种方法

我们在按钮中绑定一个方法bindtap="login"

然后我们在js中的逻辑代码

login() {
    wx.getUserProfile({
      desc: '用于登录',
      success: (res) => {
        console.log(res);
        const {
          userInfo
        } = res;
        console.log(userInfo);
        wx.setStorageSync("userInfo", userInfo);
        wx.navigateBack({
          delta: 1
        });
      }
    })
  }

点击登录后的效果图,就获取到

登录完成后跳转上一个页面

wx.navigateBack({

          delta: 1

        });

这样我们就完成了登录的流程