uniapp-用户弹窗

作用主要是：检测用户是否登录，如果未登录则弹出登录弹窗，如果已登录则不弹出登录弹窗。

接下来我们带你进行检测用户全局状态是否登录弹窗组件的开发

1、思路分析

首先来分析一下，我们这个组件需要实现什么功能？

1. 检测用户是否登录
2. 如果未登录，则弹出需要登录弹窗
3. 如果已登录，则不弹出登录弹窗

2、登陆状态检测

这里我们其实就是全局判断用户在我们本地存储的token 是否存在，如果存在则说明用户已经登录，如果不存在则说明用户未登录，我们弹出登录弹窗。

• 核心代码也非常简单，其实就是拿我们登录时候后端接口返回的token，然后判断是否存在即可。

export const checkLogin = () => {
  const token = uni.getStorageSync('token');
  if (token) {
    return true; // 已登录
  }
  return false; // 未登录
};

3、根据token拿用户ID以及其他信息

在我们拿到token信息以后，这个时候我们就可以根据用户的token信息去拿用户的其他信息，比如用户ID、用户名、用户头像等等，从而达到用户的信息本地存储，这里我简单的存储了一下用户的userId，相当于我们认识的web网页之中的LocalStorage，当然，这里只是简单的存储了用户ID.

在更进一步的功能和更加复杂的状态之中我们可以根据需要甚至利用Pinia去存储全局的其他信息，包括用户的主题设置以及其他信息，从而达到本地用户信息、主题设置、语言设置等等。

这里需要注意的就是我们跳页面的时候直接把其他页面全部全掉尽量使用uni.reLaunch，这样就不会出现页面栈的问题，导致页面无法跳转。

✌ tips:总有调皮的用户不根据正常的操作来!HAHA

uni.navigateTo // 跳转页面
uni.reLaunch // 关闭所有页面，打开到应用内的某个页面

代码部分如下：

export const checkLoginAndRedirect = (callback) => {
  const isLoggedIn = checkLogin();
  if (isLoggedIn) {
	  console.log('用户已登录！');
	  // uni.getStorageSync('token');
	  request({
	  	url: '/getInfo', // 这里的 url 会自动加上 /api 前缀
	  	method: 'GET',
	  }).then((res) => {
	  	console.log('🚀 → res -> 请求成功:', res);
	  	if (res.code == 200) {
			uni.setStorageSync('userId', res.user.id);
			uni.showToast({
				title: res.message,
				duration: 2000
			});
	  	} else {
	  		uni.showModal({
	  			title: '提示',
	  			content: res.message,
	  			success: function(res) {
	  				if (res.confirm) {} else if (res.cancel) {}
					uni.removeStorageSync('userId');
					uni.showToast({
						title: res.message,
						duration: 2000
					});
					uni.reLaunch({
						url:'/pages/component/login/login'
					})
	  			},
				fail: function (res) {
					console.log('fail');
				},
				complete: function(res) {
	  				 uni.removeStorageSync('userId');
	  				 uni.showToast({
	  				 	title: res.message,
	  				 	duration: 2000
	  				 });
	  				 uni.reLaunch({
	  				 	url:'/pages/component/login/login'
	  				 })
	  			},
	  		});
	  	}
	  }).catch((error) => {
	  	console.log('请求失败:', error);
	  });
    // 如果已登录，执行回调
    if (callback) callback();
  } else {
	console.log('用户未登录！');
    // 如果未登录，弹出提示并跳转到登录页面
    uni.showModal({
      title: '提示',
      content: '您还未登录，请先登录！',
      success: (res) => {
        if (res.confirm) {
          // 用户点击了"确定"，跳转到登录页面
		  uni.reLaunch({
		    url: '/pages/component/login/login' // 根据你的项目调整登录页面路径
		  });
        }
      }
    });
  }
};

3、代码使用

比如我们需要在首页之中检测用户的登陆状态，就可以直接把这个方法直接导入使用

import {
  checkLoginAndRedirect,
} from '@/utils/auth.js';
// 在组件挂载时直接去检查登录状态
onMounted(() => {
	checkLoginAndRedirect((res) => {
		console.log('核查登录状态结束！');
		// 执行其他操作
	});
});