uniapp微信小程序不强制登陆的逻辑（模仿大厂登陆）

阿里云国内75折回扣微信号：monov8

阿里云国际，腾讯云国际，低至75折。AWS 93折免费开户实名账号代冲值优惠多多微信号：monov8 飞机：@monov6

博主不易记得收藏点赞加关注哈

前言

正常需求中微信小程序的登陆都是不强制的但是网上大多资料教的都是强制登陆或者做个登陆页面其实这种太影响用户体验还很容易小程序审核不通过

如果想看懂这篇博客需要有做过小程序的经验因为这种可能对初学者不好理解

可以先了解下我以前发布的博客了解一下

uniapp微信小程序登陆流程前端详细__揽的博客-CSDN博客_uniapp 微信小程序登录

uniapp微信小程序登陆-升级版登陆加登录信息过期以后的无痕登陆__揽的博客-CSDN博客_uniapp小程序登录过期

思路思路中的代码在最后有展示请结合代码看

封装一个全局promise函数全局函数执行下面的逻辑
判断本地存储是否有token
如果有则代表已经登陆那么直接 return resolve出去
如果无则代表未登录那么执行下面的登陆函数
登陆函数是下面的逻辑

前端直接调用uni.login()接口换取code然后通过端口将code传给后端
后端拿到code以后通过调用微信官方的接口将code换取用户的openidunionidunionid只有小程序绑定微信公众平台以后才会有可以了解一下unionid
后端通过code换取信息以后用unionid或者openid查一下用户表用户录入的那个表并判断该用户是否在数据库里面存在
如果存在那么就将用户的信息和token一并返回给前端
如果不存在那么就在数据库添加一个默认用户默认用户只有用户的基础数据并且给他一个默认头像和昵称头像昵称是为了增强用户体验后续让用户自己更改头像和昵称创建完以后将用户数据和token返回给前端
前端拿到后端返回的用户信息和token以后存储在本地并且调用return resolve出去

调用

请求封装一个全局的request方法并且根据返回的结果判断token有无过期过期则删除本地存储的token
每个页面都调用一次封装的全局函数然后后续的request请求在其中的then方法里面
并且给用户留一个可以更改头像昵称的修改页面
这样的话这个非强制登陆的流程逻辑就完成了模仿大厂小程序的登陆

实例代码

1.全局函数

// 全局请求封装
import baseUrl from "./url.js"
const defaultUrl = baseUrl.base_url
export default () => {
	return new Promise((resolve, reject) => {
		//查询本地存储的token来判断是否登陆过
		if (uni.getStorageSync("token") != "") {
			resolve(true) //登陆的token不为空代表登陆过直接resolve
			return
		}
		//1进入到这一步代表本地存储的token为空表示没有登陆过那么走登陆函数
		//2.登陆函数逻辑通过uni.login得到的code传给后端然后后端通过https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/login/auth.code2Session.html
		//3.将得到的openidunionid查询数据库判断数据库是否有这个人
		//4.没有的话先插入库将openId和unionId存储下来并且返回
		uni.login({
			success(res) {
				uni.request({
					url: defaultUrl + "/login",
					method: "GET",
					data: {
						code: res.code
					},
					success(reqRes) {
						if (reqRes.data.code == 200) {
							uni.setStorageSync("token", reqRes.data.data.token)
							uni.setStorageSync("userInfo", reqRes.data.data)
							uni.setStorageSync("needLogInAgain", reqRes.data.data
								.needLogInAgain)
							resolve(true)
						} else {
							reject(false)
							uni.showToast({
								title: reqRes.data.msg,
								icon: 'none'
							})
						}
					}
				})
			}
		})
	})
};

2.请求request函数

// 全局请求封装
import baseUrl from "./url.js"
const defaultUrl = baseUrl.base_url
export default (url, method = 'get', params = {}) => {
	const token = uni.getStorageSync('token') || ''; //获取token
	uni.showLoading({
		title: "加载中"
	});
	return new Promise((resolve, reject) => {
		uni.request({
			url: defaultUrl + url,
			method: method,
			header: {
				'X-Token': token
			},
			data: {
				...params
			},
			success(res) {
				if (res.data.code == 200) {
					resolve(res);
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					})
					if (res.data.code == -1) {
						uni.removeStorageSync("token")
					}
					reject(res);
				}
			},
			fail(err) {
				reject(err);
			},
			complete() {
				setTimeout(() => {
					uni.hideLoading();
				}, 1500)
			}
		});
	});
};