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

深碍√TFBOYSˉ_ 2023-10-09 15:18 17阅读 0赞

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

## 前言 ##

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

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

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

[uniapp微信小程序登陆流程（前端详细）\_\_揽的博客-CSDN博客\_uniapp 微信小程序 登录][uniapp_-CSDN_uniapp _]

[uniapp微信小程序登陆-升级版，登陆加登录信息过期以后的无痕登陆\_\_揽的博客-CSDN博客\_uniapp小程序登录过期][uniapp_-_-CSDN_uniapp]

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

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

--------------------

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

--------------------

## 调用 ##

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

## 实例代码 ##

### 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.将得到的openid，unionid，查询数据库，判断数据库是否有这个人
    		//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)
    			}
    		});
    	});
    };

## 示例项目 ##

[uniapp小程序搭建UI框架corlorUi，uView框架，以及全局工具，自定义时间，request，预览图片，全局登陆-Javascript文档类资源-CSDN下载][uniapp_UI_corlorUi_uView_request_-Javascript_-CSDN]

[uniapp_-CSDN_uniapp _]: https://blog.csdn.net/qq_59747594/article/details/125892951?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522167237046916800211575355%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=167237046916800211575355&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~rank_v31_ecpm-2-125892951-null-null.blog_rank_default&utm_term=%E7%99%BB%E9%99%86&spm=1018.2226.3001.4450
[uniapp_-_-CSDN_uniapp]: https://blog.csdn.net/qq_59747594/article/details/126132278?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522167237046916800211575355%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=167237046916800211575355&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~rank_v31_ecpm-1-126132278-null-null.blog_rank_default&utm_term=%E7%99%BB%E9%99%86&spm=1018.2226.3001.4450
[uniapp_UI_corlorUi_uView_request_-Javascript_-CSDN]: https://download.csdn.net/download/qq_59747594/87269971