LowP前端的原生小程序登录架构设计

大概的样子

初始状态的设定

1. 小程序初始化时
2. post请求配置
3. api接口列表配置
4. 未登录时跳转到登录页面

第一点： 当app.js执行onLaunch时，调用geiUserToken的自定义方法，通过该方法校验本地token是否合法

第二点： 配置一个post请求方法，该方法配置自定义的请求头，请求域名，拼接api，请求参数（params）

第三点：api接口列表用一个js文件配置，样子大概如下

第四点：未登录时，跳转到登录页面

import store from '../utils/localStorage'
export default function () {
    // toLogin防止用户快速点击所产生的两次跳转到登录页面
    const toLogin = store.getData('toLogin') 
    if (toLogin == false) {
        store.setData('toLogin', true)
        wx.showToast({
            title: '请登录',
            icon: 'error',
            duration: 1000
        })
        setTimeout(() => {
            wx.navigateTo({
                url: '/user-info/user-login/user-login',
            })
        }, 1000)
    }
    if (toLogin == true) {
        setTimeout(() => {
            store.setData('toLogin', false)
        }, 100)
    }
}

当用户发起请求

1: 获取到用户的code码 2：获取到用户的昵称与头像 3：请求用户登录接口 4：判断用户状态 5：缓存token与其他信息到本地

第一：通过wx.login 获取到code码 第二：通过wx.getUserProfile 获取到用户的昵称与头像，用来分辨用户 第三：发起登录请求 第四：用户是否被禁用（可选项） 第五：缓存登录接口返回的token与其他用户信息 第六：返回到上一页

END

就系这样简单啦，通过这套框架，就可以配置好项目的登录架构了，虽然还有很多可以优化的地方，但是最基本的架构就系这样了。

项目中用到的其余js文件：

store.js

/**
 * @description 存储信息到本地
 * @param {String} name 名称
 * @param {any} data 数据
 */
const setData = function (name, data) {
  wx.setStorageSync(name, JSON.stringify(data))
}
/**
 * @description 获取本地数据
 * @param {String} name  名称
 * @returns {Any} 本地存储数据
 */
const getData = function (name) {
  const data = JSON.parse(wx.getStorageSync(name) || 'false')
  return data
}
export default {
  setData: setData,
  getData: getData
}