微信小程序登录授权

微信小程序登录授权

实现思路

自己写一个微信授权登录页面让用户实现点击的功能，也就是实现了通过 button 组件去触发 getUserInof 接口。在用户进入微信小程序的时候，判断用户是否授权了，如果没有授权的话就显示授权页面，让用户去执行授权的操作。如果已经授权了，则直接跳过这个页面。

1、 获取用户信息 通过微信的按钮button 的开放能力进行授权

//
<button type=" primary" open-type="getuserInfo" bindgetuserinfo=" getuserInfo" >微信授权登录
</button>
 
//open-type微信按钮的开放能力的类型
//bindgetuserinfo 回调函数 事件内的参数就是用户授权后的信息
 
//获取用户信息按钮的事件
getUserInfo(event){
     
   //解构用户登录需要用到的四个参数
  const {
     
   encryptedData, iv, rawData, signature
   } = event. detail;
}

2、 获取code 主要通过wx.login 获取登录凭证

//获取用户信息按钮的事件
getUserInfo(event) {
     
    //1解构用户登录需要用到的四个参数
   const {
     encryptedData,iv,rawData,signature} = event. detail;//可以获取到地址，用户名称，头像等等信息
   
  //2在按钮事件内继续获取登录的code标识
   wx.1ogin({
     
   success: res => {
     
    const{
     code}=res}
    
    //3调用登录接口获取token 在code获取完成后
    //需要传入5个必要参数
   this. getTokenData({
      //后台写的登录请求
     encryptedData,
     iv,
     rawData,
     signature,
     code
      });
   });
}

3、发请求给后台,获取登录后的token

//调用登录接口获取token,当微信授权的code获取成功的时候， 第二步做完后直接可以调用，单独封装了
getTokenData(params) {
     
    //3调用后台接口
   request({
     
    url: ' users/wxlogin' ,
    method: ' POST' ,
    data:{
     
     ...params
    }).then(res=>{
     
        //登录成功后,保存到本地
        if(res){
     
            //防止为null ，则结构会保存
            Wx.setstoragesync('token'， token);
            
            //返回上一页
            WX.navigateBack( );
        }
    })
}