小程序登录（一）

半年前开发过几个个小程序，应女朋友要求，帮她整理一份小程序登录教程。

1. 小程序调用wx.login() 获取 临时登录凭证code ，并回传到开发者服务器。
2. 开发者服务器以code换取 用户唯一标识openid 和 会话密钥session_key。
3. 服务器生成自定义登录状态session，返给前端。
4. 小程序把自定义状态session保存到localstroage，以后每次业务请求要携带上。

登录流程时序

api-login.jpg

以上是小程序官方文档提供的教程，考虑到实际场景用户状态有两种情况：

• 用户第一次访问没有session，即注册
• 用户之后访问存在session，即登录，有两种情况
  1. session有效
  2. session失效

（一）注册

1. wx.login()，获取code 换取openid 、session_key
2. wx.getUserInfo()，获取userInfo、encryptedData、iv，直接和间接得到完整用户信息

考虑到wx.getUserInfo()接口的调整，请使用 引导用户主动进行授权操作，然后调用以下login方法

• login方法，获取到的seesion为什么挂载到挂载到App.globalData上，之后会讲

login(){
    wx.login({
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
        success(res){
            var code = res.code
            wx.getUserInfo({
                success(res){
                    wx.request({
                        url: 'https://xxx.com/signin',
                        data: {
                            userInfo: res.userInfo,  //用户信息对象，不包含 openid 等敏感信息
                            encryptedData: res.encryptedData,  //包括敏感数据在内的完整用户信息的加密数据，
                            iv: res.iv  //加密算法的初始向量
                        },
                        success(res){
                            //注册成功
                            this.stroage.set('session', res.data.session)  // 本地存储session
                            this.globalData.session = res.data.session  //挂载到globalData上
                            //do something
                        }
                    })
                }
            })
        }
    })
}

• 这里封装了一个request方法，每次业务请求要携带上session，需要挂载到App.globalData以供其他子页面使用

request(url, data, fn){
    var session = this.globalData.session
    var datas = Object.assign({session}, data)  //把session合并data
    this.stroage.set('session', res.data.session)
    wx.request({
        url,
        data: datas,
        success(res){
            //成功回调处理
            fn && fn(res)
        },
        fail(error){
            //错误处理
            wx.showModal({
                title: '提示',
                content: '系统错误'
            })
        }
    })
}

• 这里封装了必备的localStroage操作

  set(key, val) {
    localStorage.setItem(key, JSON.stringify(val))
  }
  get(key) {
    return JSON.parse(localStorage.getItem(key))
  }
  remove(key) {
    localStorage.removeItem(key)
  }