1.登录功能实现方式：
系统有自己的用户体系，调用系统的登录接口，传入用户名和密码后进行登录；
系统没有用户体系，使用微信code直接注册用户后登录。
两种登录模式适用与不同的系统场景，
本系统是为公司内部使用，公司外部的人员不能登录，此时系统就需要有独立的用户体系，后端提供登录接口，小程序调用登录接口传入用户名和密码后登录。
本系统是C端用户系统，任何人都可以访问，此时就可以用第2种方式进行登录，直接用微信的code作为用户标识注册登录系统。
2.登录流程设计
image.png
3.登录步骤实现
（1）用户登录状态判断
用户登录状态可以通过全局变量来实现，由于本人不懂怎样设置全局变量，所以我用Storage数据来实现。进入小程序时获取Storage数据中的登录数据，里面包含用户的token值，时间戳等信息。如果Storage数据中没有登录数据，则用户是未登录状态，否则是已登录。
onLoad() {
//进入页面检查是否存在缓存的登录数据信息，存在时说明不是第一次登录
const loginData = uni.getStorageSync('accessToken')
if (!loginData) {
console.log('登录数据不存在')
return
} else {
console.log('登录数据存在', loginData)
this.userInfo = uni.getStorageSync('userinfo') //获得用户微信的昵称和头像
const accessToken = loginData.data //获得用户token
const oldtime = loginData.time //上次登录时保存的时间戳
const newtime = Date.parse(new Date()) / 1000 //当前的时间戳
//token设置有效期为7天，7天内判定登录状态loginStatus为true
newtime - oldtime <= 604800 ? this.loginStatus = true : this.loginStatus = false
console.log('this.loginStatus',this.loginStatus)
}
},
（2）未登录状态，点击“登录”按钮后，弹出授权，调用uni.getUserProfile获取用户的昵称和微信号等信息
<view class="login-box" v-if="!loginStatus">
<view class="userName">您还未登录</view>
<view class="button-box">
<view class="login-in" @click="loginHandler">登录</view>
</view>
</view>
<view class="login-box" v-else>
<view class="userName">欢迎您：{{userInfo.nickName}}</view>
<view class="button-box">
<view class="login-out" @click="checkoutHandler">退出</view>
</view>
</view>
loginHandler() {
uni.getUserProfile({
desc: "为了给用户提供更好的服务",
success: (res) => {
uni.setStorageSync('userinfo', res.userInfo) //把微信信息保存到Storage
this.userInfo = res.userInfo
this.wxLogin() //调用wxLogin() 获取用户登录凭证code
},
fail: (err) => {
uni.showToast({
icon: "none",
title: '用户拒绝授权'
})
}
})
},
（3）调用uni.login获取用户登录凭证code
//获取微信code
wxLogin() {
uni.login({
success: (res) => {
//console.log(res)
this.params.code = (res.code)
this.handleLogin() //向后端发起登录请求
}
})
},
（4）把code传给后端登录接口，进行登录操作
此处需要后端的同事提供登录接口，大家也可以用我的接口进行测试： https://pcrm.xiaozhiinfo.com/api/login-with-wechat-code
（5）登录成功后，保存用户信息到Storage
//通过微信Code直接登录
async handleLogin() {
const logindata = await request({
url: '/login-with-wechat-code',
method: 'POST',
data: {
code: this.params.code
},
})
console.log("登录请求完成,打印登录数据", logindata)
if (logindata.code != 0) { //如果返回的code不等于0，返回登录失败提示信息
return uni.showToast({
title: logindata.message
})
} else {
this.loginStatus = true //登录状态修改为true
uni.setStorageSync('accessToken', { //把登录返回的token信息保存到Storage
data: logindata.data,
time: Date.parse(new Date()) / 1000, //记录当前时间戳
})
uni.showToast({
title: '登录成功'
})
}
},
//退出登录
checkoutHandler() {
this.loginStatus = false
uni.clearStorageSync('accessToken')
uni.clearStorageSync('userinfo')
},
到此登录功能完成了，此登录流程没有要求用户授权手机号，只需获取了用户的微信昵称和微信号，对于用户来说比较友好。
我是今年3月份开始自学前端的，没有任何编程基础，写的代码可能存在很多缺陷或不足，望大家看到后能指正，感谢！！
