1. uniapp小程序用户登录的必要性
在构建uniapp小程序时，很多开发者会思考一个重要的问题：是否要添加登录功能？对于这个问题，答案是肯定的。小程序的登录功能对于用户、后台管理系统和开发者本身都有重要的意义。下面我们来分别看一下这些方面的需求。
1.1 用户需求
用户登录在小程序中的主要作用是保护用户个人信息的安全性。考虑到小程序具有一定的用户交互性质，如果小程序不强制要求用户进行登录，则在用户的使用过程中存在一定的隐私风险，例如可能会泄露用户的个人资料和账户信息等敏感信息。通过登录，用户可以在使用小程序过程中保护自己的隐私，避免产生某些不必要的风险。此外，一些个性化的功能，例如用户个人中心页、历史记录页等，也需要用户先进行登录才能正常使用，因此用户登录也可以提高小程序的功能性和用户体验性。
1.2 后台管理系统需求
用户登录对后台管理系统而言则是更具有重要性的。除了对用户资料的管理，登录可以方便系统对于每个用户的访问行为进行追踪和记录，这对于后期优化系统性能和分析用户留存率等数据也具有很大的价值。此外，管理者控制权的设置也需要在登录状态下才能正常进行，例如管理者对于某些敏感信息的保护等，都需要先确定用户的身份信息以进行相关操作。
1.3 开发者需求
对于开发者而言，用户登录可以通过减少恶意用户对于小程序的破坏起到一定的保护作用。开发者同样可以对于每个用户的访问行为和留存情况进行监测和分析，例如判断用户跳出率等数据，以便后期的优化。
2. uniapp小程序登录方式
对于用户登录方式，uniapp小程序提供了两种不同的方式：通过手机号的快捷登录和通过账号密码的常规方式登录。下面我们来看一下这两种方式的优缺点及使用说明：
2.1 快捷登录
快捷登录常用于简单易操作或优化体验场景，适用于不需要在小程序中进行账户资金操作或敏感信息保护的小程序。通常使用手机号码+短信验证码的方式，让用户可以方便快速地登录小程序。
使用uniapp实现手机号快捷登录代码如下：
//事件触发
loginByPhone(){
uni.login({
provider: 'weixin',
success:(res) => {
// 获取到登录凭证
if(res.code){
uni.request({
url:app.globalData.url + 'Login/login',
data:{
code:res.code
},
header:{
'content-type': 'application/json'
},
success:(res1) => {
// 判断用户是否已经授权，如果没有授权处理方法为“getUserInfo",同时跳转授权页面
if(res1.data.code == '10002'){
this.getUserInfo()
}else if(res1.data.code == '0' ){
this.doLoginByPhone()
}else{
uni.showToast({
icon: 'none',
title: res1.data.msg
})
}
},
fail:(err) => {
console.log(err)
uni.showToast({
icon: 'none',
title: '登录失败'
})
}
})
}
},
fail:() => {
console.log("获取用户登录态失败");
}
})
},
doLoginByPhone(){
let phoneLoginInfo = {
phone: this.phone,
code: this.verifyCode
}
// 将此段函数用uni.request发送给后台进行手机号码的验证
uni.request({
url:app.globalData.url + 'Passport/mobileLogin',
data:phoneLoginInfo,
header:{
'content-type': 'application/json'
},
success:(res) => {
if(res.data.code == '0'){
uni.showToast({
icon: 'none',
title: '登录成功'
})
this.$store.commit('loginSuccess', res.data.result);
uni.redirectTo({
url: '/pages/index/index'
})
return false
}else{
uni.showToast({
icon: 'none',
title: res.data.msg
})
}
},
fail:(err) => {
console.log(err)
uni.showToast({
icon: 'none',
title: '验证失败'
})
}
})
},
2.2 常规方式登录
常规方式登录则是通过账户密码进行的登录。相对于快捷登录，账户密码登录的安全性更高，适用于需要在小程序中进行账户资金操作或敏感信息保护的小程序。常规方式登录可以通过登录页进行，用户输入自己设置的账户和密码进行登录即可。
使用uniapp实现常规账号密码登陆代码如下：
//事件触发
loginByForm(){
// 将用户的账号和密码封装成formData数据类型
let formData = {
username: this.username,
password: this.password
};
// 将此段函数用uni.request发送给后台进行账号的验证
uni.request({
url: app.globalData.url + 'Passport/login',
data:formData,
header: {
'content-type': 'application/json'
},
success:(res) => {
if(res.data.code == '0'){
uni.showToast({
icon: 'none',
title: '登录成功'
})
this.$store.commit('loginSuccess', res.data.result);
uni.redirectTo({
url: '/pages/index/index'
})
return false
}else{
uni.showToast({
icon: 'none',
title: res.data.msg
})
}
},
fail:(err) => {
console.log(err)
uni.showToast({
icon: 'none',
title: '登录失败1'
})
}
})
}
3. uniapp小程序用户登录流程
用户登录流程的设计对于用户体验起着至关重要的作用。下面，我们来说一下一个简单的uniapp小程序登录流程的搭建过程。
3.1 登录页设计
登录页通常需要包含两个输入框：一个输入用户名，另一个输入密码。用户成功输入后，可以通过点击“登录”按钮将数据传送到后台进行验证并返回登录结果。
设计一个简单的登录页代码如下：
<template>
<view class='container'>
<view class='form'>
<h3>用户登录</h3>
<input type='text' placeholder='请输入用户名' v-model='username'/>
<input type='password' placeholder='请输入密码' v-model='password'/>
<button @tap='loginByForm'>登录</button>
</view>
</view>
</template>
<script>
import { mapMutations } from 'vuex'
export default {
data(){
return {
username:'',
password:'',
}
},
methods:{
...mapMutations(['loginSuccess']),
loginByForm(){
// 将用户的账号和密码封装成formData数据类型
let formData = {
username: this.username,
password: this.password
};
// 将此段函数用uni.request发送给后台进行账号的验证
uni.request({
url: app.globalData.url + 'Passport/login',
data:formData,
header: {
'content-type': 'application/json'
},
success:(res) => {
if(res.data.code == '0'){
uni.showToast({
icon: 'none',
title: '登录成功'
})
this.$store.commit('loginSuccess', res.data.result);
uni.redirectTo({
url: '/pages/index/index'
})
return false
}else{
uni.showToast({
icon: 'none',
title: res.data.msg
})
}
},
fail:(err) => {
console.log(err)
uni.showToast({
icon: 'none',
title: '登录失败1'
})
}
})
}
}
}
</script>
3.2 状态检查
状态检查的作用是在用户点击小程序的个人用户中心页时先检查用户是否处于登录状态。对于未登录用户，需要跳转到登录页进行登录以获得相关操作权限。
一个简单的状态检查代码如下：
const app = getApp()
let loginCheck = function (_self) {
let user = uni.getStorageSync('user')
if(!user||!user.token){
uni.showToast({
icon: 'none',
title: '请先登录',
success(){
uni.redirectTo({
url:"/pages/login/index"
})
}
})
return false
}
_self.$parent.globalData.userInfo = user
return true
}
export default loginCheck
3.3 登录态整体管理
登录态整体管理主要包括全局、局部两方面的考虑。
1. 全局管理：
全局管理指在整个系统运行过程中，对于用户登录态进行监控和管理。通过登录态的状态值进行注册，判断当前页面功能是否的开放等，以便管理整个小程序的用户交互性能。可以在关键路径实现拦截器，管理用户会话状态的开启、保持与清理，如通过每次请求携带会话Token，保持用户登录态；当检测到Token异常（Session失效、用户被踢出等）时统一清理会话状态，下次请求跳转登录。
2. 局部管理：
局部管理是通过对应的组件或页面页面进行规范设计，通过拦截器、钩子函数等实现对局部功能的管理，主要功能包括：
通过设置获取钩子函数对登录态进行验证，并根据验证结果进行反应
通过拦截器对各个请求进行检测，以防止未授权的用户在系统中恶意进行破坏或其他违法行为。
一个局部管理代码示例如下：
export default {
data:function(){
return{
goodsIcon:'/static/image/goods-2.png',
}
},
mounted(){
let _self = this
loginCheck(_self) //验证登录
},
methods:{
// 个人中心未登录点击时跳转到登录页
loginLink(){
uni.navigateTo({
url:'/pages/login/index'
})
},
}
}
4. uniapp小程序的登录问题
在实践过程中，uniapp小程序的用户登录也存在一些常见的问题。下面我们介绍其中的两个问题：
4.1 session过期
Session过期问题主要是由于身份认证信息(服务器传回的Token)失效引起的。产生的原因可能有多样性：用户主动退出登录、系统升级迭代、服务器较繁忙、请求失败等原因。对于这个问题，我们只能单独进行处理而无法进行全局统一调配。
4.2 session共用
Session共用问题主要是因为uniapp小程序在进行登录模块开发时未能进行全局状态的同步管理导致，会出现用户注销登录造成的全局状态数据不统一的情况。
5. 总结
通过本次文章，我们已经详细介绍了uniapp小程序的用户登录功能的实现流程和对应的实现代码。对于小程序而言，用户登录功能是一个基础性的功能，它可以保证用户隐私的安全、提升小程序的功能性，也对于后台管理系统的优化和开发者的开发工作有着重要的作用。我们建议开发者在场景允许情况下尽量添加登录模块，以保证小程序更高的可用性。