微信小程序 - 登录功能实现

一、认证流程

1. 小程序调用wx.login获取登录认证需要的code，并请求开发者服务器。

2. 开发者服务器根据code，appid, appsecret请求微信接口t获取 openid与session_key ，并生成自己的认证token，并返回给小程序。

3.小程序请求开发者服务器，带上token后可以直接访问。

tips: 为了安全考虑，服务器必须有appid和appsecret才能根据code获取token。

二、代码实现

onLogin(){wx.login({success: (res) => {// oauth codeconst code = res.code;// 请求开发者服务器，获取oauth token信息wx.request({url: `http://localhost:8080/auth?code=${code}`, header:{'content-type':'application/json'},method: 'POST',success(res){const data = res.data;// 将结果写入到localstorage中wx.setStorageSync('user', {username: data.username,token: data.token})}})},})

认证结果存储选择

      方式一: 全局变量 -> 刷新会丢失。

      方式二: localstorage -> 本地存储。

Whtml 如何获取认证状态

      小程序的whtml没有React好用，react是 all in js(js里面方法，数据直接用)。 而whtml 只能通过data与js通信，所以需要page 设置auth字段，并且需要从localstorage中赋值。