小程序的登录授权

小程序的登录授权

项目中的实现思路

 点击进入店铺--进入首页--获取token，uid
 
如何获取token
第一步：通过wx.login得到code，调用接口获取登录凭证.通过凭证进而换取用户登录信息

第二步：通过调用接口公司后台接口获取腾信用户匿名信息

 //引入接口
const {authorize}=require('../../http/api')
  //登录/注册
  goLogin() {
   wx.login({
    success(res) {
      console.log(res);
      let {code}=res;
      authorize(code).then(res=>{
        console.log('我能获取到信息：',res);
        if(res.code===0) {
          //解析出token,uid,但是得到是匿名用户信息
          let {token,uid}=res.data
          if(!wx.getStorageSync('token')) {

            wx.setStorageSync('token', token)
          }
        }
      })
    }
   })
  }
  第三步：获取微信详细的用户信息
  
     获取微信用户详细：
     
        以前：wx.getUserInfo()
        现在：wx.getUserProfile()
        
        token:是用户的唯一标识，是用户（前端）登录之后，后台对用户名，密码和失效时间加密返回给浏览器的一个字符串，用户（前端）可以利用token写其他业务代码
        
        检测token是否有效:调取公司后台接口来检测是否有效 user/check-token
        检测微信登录态是否有效  wx.checkSession()
        
  //检测微信登录状态      
 async function checkSession(){
  return new Promise((resolve, reject) => {
    wx.checkSession({
      success() {
        return resolve(true)
      },
      fail() {
        return resolve(false)
      }
    })
  })
}
        
// 整体检测微信和token是否失效，返回 true / false
async function checkHasLogined() {
  const token = wx.getStorageSync('token')
  if (!token) {
    return false
  }
  const loggined = await checkSession()
  if (!loggined) {
    wx.removeStorageSync('token')
    return false
  }
  const checkTokenRes = await WXAPI.checkToken(token)
  if (checkTokenRes.code != 0) {
    wx.removeStorageSync('token')
    return false
  }
  return true
}
        
 小程序登录、用户信息相关接口调整说明：
 https://developers.weixin.qq.com/community/develop/doc/000cacfa20ce88df04cb468bc52801

总结微信登录授权流程

1.通过wx.login获取code
2.通过code换取用户的匿名信息，并将获取的coken缓存起来
3.通过调用wx.getuserprofile（）方法获取用户详细信息
		  toLogin() {
		    wx.getUserProfile({
		      lang:'zh_CN',
		      desc:'我要获取信息用户',
		      success:(res)=>{
		        console.log('用户详情：',res);
		        this._updateUser(res.userInfo)
		      }
		    })
		  }
4.再调用公司后台修改用户接口，来更新用户信息
	  /**
	    * 修改用户信息
	    * @obj {Object} 要接收的对象参数如下：
	    * city:所在城市
	    * nick:昵称
	    * province:省份
	    * avataUrl:头像地址
	    * gender:性别
	    * token
	    */
	
	  modifyUser:(obj)=>{
	    return request('user/modify','POST',obj,true)
	  },
	 
	 _updateUser(userInfo) {
	    let token=wx.getStorageSync('token');
	    let {city,nickName,avatarUrl,province,gender}=userInfo;
	    let _data={city,nick:nickName,avatarUrl,province,gender,token}
	   // console.log(_data);
	    modifyUser(_data).then(res=>{
	      console.log('修改成功：',res);
	    })
5.最后拉取用户信息，将用户信息渲染到视图上
		//获取用户信息
		  async getUserInfo() {
		    let token=wx.getStorageSync('token')
		    //调取用户详情的接口
		    const res=await getUserDetail(token)
		    console.log('调取用户详情:',res);
		    let _data={}
		    if(res.code===0) {
		      let {avatarUrl,id,nick}=res.data.base;
		      let n=0;
		      if(nick && avatarUrl ) {
		        n=2;
		      }else {
		        n=1;
		      }
		      _data={avatarUrl,id,nick,isShow:n}
		      this.setData(_data)
		    }
		  }