登录流程

1. 三个角色：

• 小程序端

• 微信自己的服务器

• 公司的服务器

2. openid
openid：每一个微信用户的唯一标识
openid一般不保存在客户端，一般保存在服务器端。
我们自己的服务器会和微信的服务器进行通信。到时候微信的服务器就会返回一个session_key和openid，到时候我们的服务器会把这个openid存到数据库中。

3. 登录的过程：

1. 我们的小程序端先调用接口 wx.login()，向微信的服务器发送请求，获取到一个code，这个code在我们的客户端是没有用的。
   1.1 这个code的作用是发送到我们自己的服务器
   1.2 微信小程序端通过调用wx.request()将code发送到我们的服务器
   1.3 服务器拿到code和appid（一开始申请到的）和appsecret
   1.4 appsecret是怎么获取的：在小程序控制台，和appid在一个地方，可以重置。

2. 我们的服务器与微信的服务器进行一次沟通，将code+appid+appsecret这三个东西传递给微信的服务器，

3. 微信的服务器会返回session_key和openid。服务器就拿到了openid，不会传给客户端，而是将openid存到服务器。
   3.1 有时候，公司希望不仅能用微信登录，还可以用用户名+密码登录小程序。
   3.2 一般用账号+密码登录的时候，会在第一步，先让用户输入用户和密码，服务器验证通过以后，再将账号+密码+code发送给微信的服务器，换取openid；之后将openid+账号+密码存储在数据库的某个表中（t_user）。

4. 服务器端验证通过之后，会向客户端返回一个token，登录状态。客户端会把token保存起来。小程序中有个storage，一般将token保存在storage中。

5. 下次再打开小程序的时候，就可以先从缓存中拿出token来，发送给服务器，验证一下是否过期，不用每次打开都登录一下了。如果过期了再登录，没过期的话就直接使用这个。

6. 以后客户端向服务器发送请求（请求需要在登录的状态下才会返回结果时），会携带token。服务器会根据token查询openid或者session_key和其他数据。然后将数据返回给客户端。

4. 简化后的流程：

1. 调用wx.login获取code

2. 调用wx.request发送code到我们自己的服务器（我们自己的服务器会返回一个登录状态的标识，比如token）

3. 将登录状态的标识token进行存储，以便下次使用

4. 请求需要登录状态的接口时，带上这个token。

5. 官方图解

小程序登录流程官方图

官方文档：https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/login.html

代码演练

接口：

• 登录接口

• token是否过期的接口

登录接口：

接口：/login
method：post
参数：code （如果想要账号和密码登录的话，传递code+账号+密码）
返回：token

token是否过期的接口：

接口：/auth
method：post
参数：header，token，将token放在header中传递过去
返回值：
错误码：
1001：没有传入token
1002：传入错误的token
1003：token过期。

一般情况下，登录在app.js中做，不用等到进入某个页面再做。

wx.setStorage与wx.setStorageSync的区别：

• wx.setStorage是异步的

• wx.setStorageSync是同步的

小程序登录的流程代码大体如下：

// 注册小程序的示例const TOKEN = "token"; // 规范写法，写成常量，也可以抽取出来到一个常量文件中。App({
  // 全局对象，一旦小程序关闭掉，会被回收
  globalData: {
    token: "", //token
  },

  // 小程序初始化完成时，加载完，一般在这里进行登录操作
  onLaunch: function(options) {
    // 3. 做登录操作
    // 3.1 先在缓存中取出token，如果有，就验证；没有再登录。
    const token = wx.getStorageSync(TOKEN);
    // 3.2 判断token是否有值，并且判断长度>0
    if (token && token.length > 0) { // 已经有token，需要验证是否过期
      console.log("执行了验证token操作");
      // 验证token是否过期
      this.checkToken(token);
    } else {  // 还没有token，所以得先登录
      this.login(); // 登录一下
    }
  },
  
  // 登录的代码
  login() {
    console.log("执行了登录操作");
    wx.login({
      success: (res) => {
        console.log(res.code); // code只有5分钟的有效期
        // 1. 获取code
        const code = res.code;
        // 2. 将code发送给自己的服务器
        wx.request({
          url: 'http://123.207.32.32:3000/login', // 调用了别人的接口
          method: "post",
          data: {
            code,
          },
          success: (res) => {
            console.log(res); // 服务器会返回一个token
            // token的作用：在首页，关于啥的页面，都携带token才能查看某些内容
            // 拿到token，很多地方都要用，所以最好保存到全局中。
            // 3. 保存到全局
            const token = res.data.token;
            this.globalData.token = token; // 为了this有效，要都写成箭头函数的形式
            console.log(this.globalData.token);
            // 4. token进行本地存储（同步的）
            wx.setStorageSync(TOKEN, token);
          },
          fail: function(error) {
            console.log(error);
          }
        })
      }
    })
  },
  
  // 验证token是否过期
  checkToken(token){
    wx.request({
      url: 'http://123.207.32.32:3000/auth',
      method: "post",
      header: {
        token,
      },
      success: (res) => {
        if(!res.data.errCode){  // token有效
          this.globalData.token = token;
        }else{  // token无效，得重新登录
          this.login(); 
        }
      },
      fail: (error) => {
        console.log(error);
      }
    })
  }})