微信小程序授权登录流程

小程序登录流程

1. 小程序登录流程可分为三部分

2. 小程序，开发者服务器，微信服务器
   我这里主要介绍小程序与开发者服务器交互

1. 先从onlaunch先从缓存中取出token

 const token=wx.getStorageSync(TOKEN)

2. 判断token是否有值

 if(token && token.length !==0){
      //已经有token

      //进行验证token是否过期
       this.checkout(token)
    }else{
      //没有token进行登录操作
      this.login()
    }
  }

3. 进行验证token是否过期

checkout(token){
    console.log('进行验证token操作');
    
   wx.request({
   //url指的是开发者服务地址，可以根据自己需求
     url: 'http://123.207.32.32:3000/auth',
     method:'POST',
     header:{
      token
     },
     success :(res)=>{
        //res.data.errCode是服务器返回给前台的数据，可以请求成功以后将res打印
        if(!res.data.errCode){
           //token有效
           console.log('token有效');
          //将token重新保存入全局变量 
          this.globalData.token=token
        }else{
          //token无效，重新登录
          this.login()
        }
        
     },
     fail: (err)=>{
    console.log(err);
    
     }
     
   })

  }

4.登录操作

login(){
     //首次登录操作
     console.log('进行登录操作');
     
     wx.login({
      //code只有5分钟有效期
     success: (res)=>{
        //console.log(res);
        //1.获取code
        const code=res.code
        //2.将code发送给自己的服务器
        wx.request({
          url: 'http://123.207.32.32:3000/login',
          method:"POST",
          data:{
            //除了code以外还可以传递其他参数比如账号+密码
            code
          },
          success:(res)=>{
            //请求成功时获得后台服务器返回的token，并将token保存下来，保存在全局变量当中，因为首页或者其他
            //页面需要发送网络请求

            //token是服务端生成的一串字符串，以作客户端进行请求的一个令牌，
            //当第一次登录后，服务器生成一个Token便将此Token返回给客户端，以后客户端只需
            //带上这个Token前来请求数据即可，无需再次带上用户名和密码。

            //  console.log(res);
             //1取出token
             const token=res.data.token
             //2.进行保存到全局变量
             this.globalData.token=token
            //  console.log(this.globalData.token);
             //3.进行本地保存可以使用异步操作或同步操作
           wx.setStorageSync(TOKEN, token)

             
          }
        })
         
     }
    })
  }

完整流程，在app.js文件操作

const TOKEN='token'
App({
  globalData: {
    userInfo: null,
    token:''
    
  },
  onLaunch(){
   //1.先从缓存中取出token
    const token=wx.getStorageSync(TOKEN)
    //2判断token是否有值
    if(token && token.length !==0){
      //已经有token

      //进行验证token是否过期
       this.checkout(token)
    }else{
      //没有token进行登录操作
      this.login()
    }
  },
  checkout(token){
    console.log('进行验证token操作');
    
   wx.request({
     url: 'http://123.207.32.32:3000/auth',
     method:'POST',
     header:{
      token
     },
     success :(res)=>{
       
        if(!res.data.errCode){
           //token有效
           console.log('token有效');
           
          this.globalData.token=token
        }else{
          //token无效
          this.login()
        }
        
     },
     fail: (err)=>{
    console.log(err);
    
     }
     
   })

  }
  ,
  login(){
     //登录操作
     console.log('进行登录操作');
     
     wx.login({
      //code只有5分钟有效期
     success: (res)=>{
        //console.log(res);
        //1.获取code
        const code=res.code
        //2.将code发送给自己的服务器
        wx.request({
          url: 'http://123.207.32.32:3000/login',
          method:"POST",
          data:{
            //除了code以外还可以传递其他参数比如账号+密码
            code
          },
          success:(res)=>{
            //请求成功时获得后台服务器返回的token，并将token保存下来，保存在全局变量当中，因为首页或者其他
            //页面需要发送网络请求

            //token是服务端生成的一串字符串，以作客户端进行请求的一个令牌，
            //当第一次登录后，服务器生成一个Token便将此Token返回给客户端，以后客户端只需
            //带上这个Token前来请求数据即可，无需再次带上用户名和密码。

            //  console.log(res);
             //1取出token
             const token=res.data.token
             //2.进行保存到全局变量
             this.globalData.token=token
            //  console.log(this.globalData.token);
             //3.进行本地保存可以使用异步操作或同步操作
           wx.setStorageSync(TOKEN, token)

             
          }
        })
         
     }
    })
  }
  
})