uni-app实现登录功能之一

用户登录场景

用户登录是一个常见的场景，在应用程序中起到关键的作用。下面是几个常见的用户登录场景：

1. 应用程序初始登录：当用户第一次打开应用程序时，需要输入用户名和密码进行登录。

2. 会话保持：在用户已经登录的情况下，当用户关闭应用程序并重新打开时，可以自动使用之前保存的用户信息进行登录，无需再次输入用户名和密码。

3. 账号切换：应用程序可能支持多个账号登录，用户可以选择切换不同的账号进行登录。例如，电子邮件客户端允许用户同时登录多个邮件账号。

4. 第三方登录：应用程序支持使用第三方平台（如微信、QQ、微博等）账号进行登录。

5. 忘记密码：当用户忘记密码时，提供找回密码的功能，可以通过手机短信、邮箱验证等方式重设密码。

6. 社交登录：允许用户使用社交媒体账号（如Facebook、Twitter等）进行登录，提高用户的便捷性和流畅度。

7. 单点登录（SSO）：在一个生态系统中，用户可以通过一次登录获得对多个关联应用程序的访问权限，而无需为每个应用程序单独进行登录。

在这些场景下，通常需要实现用户身份认证、安全性处理、用户信息管理等功能，以提供良好的用户体验和数据安全。同时，需要注意保护用户的隐私信息，并遵守相关法律和规定，如个人信息保护法等。

更多详细内容，请微信搜索“前端爱好者“， 戳我 查看 。

前置条件

uni-app 如何请求数据

在uni-app中，你可以使用uni.request方法来发送网络请求获取数据。uni.request是封装了小程序的wx.request的跨平台的网络请求API。

以下是一个简单的示例，演示了如何使用uni.request发送GET请求并获取返回的数据：

// 发送GET请求
uni.request({
  url: 'http://example.com/api/data', // 请求的URL
  method: 'GET', // 请求方法，可选值包括：GET/POST/PUT/DELETE等
  data: {}, // 请求参数，可根据接口文档自行添加
  header: { 
    'Content-Type': 'application/json' // 请求头，根据实际情况设置
  },
  success: (res) => { // 请求成功回调函数
    console.log(res.data); // 输出返回的数据
  },
  fail: (err) => { // 请求失败回调函数
    console.log(err);
  }
});

如果需要发送POST请求，只需将method改为POST，并在data字段中传递请求参数。

你也可以使用axios、flyio等第三方库来进行网络请求，它们提供了更丰富的功能和更友好的API。你可以根据自己的需求选择使用合适的网络请求库。

创建用户登录页面

<template>
	<view class="login-container">
		<uni-forms ref="form" :modelValue="formData">
			<uni-forms-item label="姓名" name="name">
				<uni-easyinput type="text" v-model="formData.name" placeholder="请输入姓名" />
			</uni-forms-item>
			<uni-forms-item label="密码" name="password">
				 <uni-easyinput type="password" v-model="formData.password" placeholder="请输入密码" />
			</uni-forms-item>
		</uni-forms>
		<button @click="submit">提交</button>
	</view>
</template>

<script setup>
	import { reactive, ref } from 'vue'   
		
	const formData = reactive({
		name: 'LiMing',
		password: 'LiMing.com',
	}) 
	
	// 触发提交表单 
	const submit = ()=>{ 
      
	}
</script> 

页面展示入下：

创建用户需要的数据

新建文件 userUserStore.js,用于存储用户信息。

// userUserStore.js

import { ref } from 'vue'

// 导入定义仓库的方法
import {defineStore} from 'pinia';

export const useUserStore = defineStore("user",()=>{
	// state :userInfo，token，
	const userInfo = ref({})
	const token = ref('');
	
	// actions：login，logout
	function login(data){
	}
	
	function logout(data){
	}
	
	return {
		userInfo,token,login,logout
	}
	
})

添加是登录事件

function login(data) {
		var that = this;
		uni.request({
			url: "url",
			method: "POST",
			data,
			success(res) {
				console.log("res", res)
				if (res.data.code === 200) {
					// 更新store
					userInfo.value = res.data.user;
					token.value = res.data.token;
					// 本地存储
					uni.setStorageSync("userInfo", res.data.user)
					uni.setStorageSync("token", res.data.token);
					uni.showToast({
						title: res.data.msg,
						icon: 'success'
					})
					// 跳转到首页
					uni.redirectTo({
						url: '/pages/index/index'
					})
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					})
				}
			},
			fail() {
				uni.showToast({
					title: "登录失败",
					icon: 'error'
				})
			}
		})
	}

用户登录页面中使用 pinia 进行登录

// 引入，并实例化 useUserStore
import {useUserStore} from '@/stores/userUserStore.js'
const userStore = useUserStore()

// 触发提交表单 
const submit = ()=>{ 
	userStore.login(formData) 
}

完整实例入下：

@/stores/userUserStore.js

import { ref } from 'vue'
	
// 导入定义仓库的方法
import { defineStore } from 'pinia';

export const useUserStore = defineStore("user", () => {
	// state :userInfo，token，
	const userInfo = ref({})
	const token = ref('');

	// actions：login，logout
	function login(data) {
		console.log('data')
		console.log(data)
		var that = this;
		uni.request({
			url: "url",
			method: "POST",
			data,
			success(res) {
				console.log("res", res)
				if (res.data.code === 200) {
					// 更新store
					userInfo.value = res.data.user;
					token.value = res.data.token;
					// 本地存储
					uni.setStorageSync("userInfo", res.data.user)
					uni.setStorageSync("token", res.data.token);
					uni.showToast({
						title: res.data.msg,
						icon: 'success'
					})
					// 跳转到首页
					uni.redirectTo({
						url: '/pages/index/index'
					})
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					})
				}
			},
			fail() {
				uni.showToast({
					title: "登录失败",
					icon: 'error'
				})
			}
		})
	}

	function logout(data) {}

	return {
		userInfo,
		token,
		login,
		logout
	}

})

登录页面

<template>
	<view class="login-container">
		<uni-forms ref="form" :modelValue="formData">
			<uni-forms-item label="姓名" name="name">
				<uni-easyinput type="text" v-model="formData.name" placeholder="请输入姓名" />
			</uni-forms-item>
			<uni-forms-item label="密码" name="password">
				 <uni-easyinput type="password" v-model="formData.password" placeholder="请输入密码" />
			</uni-forms-item>
		</uni-forms>
		<button @click="submit">提交</button>
	</view>
</template>

<script setup>
	import { reactive, ref } from 'vue'
	
	// 引入，并实例化 useUserStore
	import {useUserStore} from '@/stores/userUserStore.js'
	const userStore = useUserStore()
		
	const formData = reactive({
		name: 'LiMing',
		password: 'LiMing.com',
	}) 
	
	// 触发提交表单 
	const submit = ()=>{ 
     userStore.login(formData) 
	}
</script>