全栈项目|小书架|微信小程序-登陆及token鉴权

小程序登陆

以前也写过微信小程序登陆的相关文章：

• 微信小程序~新版受权用户登陆例子
• 微信小程序-携带Token无感知登陆的网络请求方案
• 微信小程序开通云开发并利用云函数获取Openid

也能够经过官方的这张时序图了解小程序的登陆流程：

从流程图上能够看出微信小程序登陆须要先调用wx.login() 获取 临时登陆凭证code ，并回传到开发者服务器。而后在服务器端调用 auth.code2Session 接口，换取 用户惟一标识 openid和 会话密钥 session_key等信息。以后开发者服务器能够根据用户标识来生成自定义登陆态，用于后续业务逻辑中先后端交互时识别用户身份。

登陆方式

wx.login() 是在微信小程序端登陆的时候调用，而常见的登陆方式有如下几种：

• 启动小程序以后弹出登陆弹窗
• 点击特定按钮登陆
• 两者结合实现

登陆实现

我这里的实现是经过 点击登陆按钮 实现登陆。在《小书架》项目中有两处能够进行登陆。

• 个人页面，未登陆会显示登陆区域
• 在文章详情页面，未登陆会弹出登陆弹窗 在点击了登陆按钮以后会调用下面的代码，将登陆凭证发给服务器：

wx.login({
      success: function(loginRes) {
        if (loginRes.code) {
          let userStorageInfo = wx.getStorageSync('userInfo');
          // 请求服务端的登陆接口
          wx.request({
            url: api.loginUrl,
            method: 'POST',
            data: {
              account: loginRes.code, // 临时登陆凭证
              type: 100, // 100 表示小程序用户
              userInfo: JSON.stringify(userStorageInfo)
            },

            success: function(res) {
              console.log(res);
              if (res.statusCode == 200) {
                console.log('-----获得 Token---------');
                wx.setStorageSync('loginToken', res.data.token);
              } else {
                console.log("Error:" + res.errmsg);
              }
            },
            fail: function(error) {
              // 调用服务端登陆接口失败
            }
          });
        } else {
          // 获取 code 失败
        }
      },
      fail: function(error) {
        // 调用 wx.login 接口失败
      }
    });

当微信小程序端发送code登陆凭证给服务端以后，服务端调用微信提供 的接口，获取openid等数据。

token 鉴权

在服务器开发中有些接口API是须要登陆后才能使用，好比：收藏、评论等。而如何判断用户是否登陆，在移动端常见的手段是经过 token 来验证登陆的时效性。也就是在用户登陆以后，生成一个具备有效期的token，返回给客户端使用，token超过了有效期就说明用户的登陆状态失效了，须要从新登陆。

ps: token的介绍能够查看我以前的相关文章。

获取 token

验证 token

---

咨询请加微信：轻撩便可。

原文出处：https://www.cnblogs.com/gdragon/p/11946441.html