起因
目前正在使用uni-app开发一个微信小程序，开发到登录模块时通过查阅uni-app官方教程、微信小程序官方文档、网上的教程终于是实现了微信小程序的登录模块，现总结分享给大家，共同学习。
总体思路
-
创建Vuex进行状态管理（可根据实际需求自行选择是否使用）
-
创建一个登录按钮并添加触发事件
-
调用官方
uni.getUserProfile()接口获取用户信息 -
调用官方
uni.login()接口获取临时登录凭证code -
调用后端的登录接口将code 传过去获取token 值
-
登录成功！渲染用户信息到页面中
-
创建一个退出登录按钮并添加触发事件
-
清空 vuex 中的 userinfo和token
-
退出成功！跳转到其他页面
详细流程
- 创建Vuex进行状态管理，用于全局存放token和用户信息方便使用。（可根据实际需求自行选择是否使用）
token 可用于判断用户是否已登录，以及作为后续的访问凭证
const store = createStore({
state: {
"token": uni.getStorageSync('token') || '',
"userinfo": JSON.parse(uni.getStorageSync('userinfo') || '{}')
},
mutations: {
// 更新用户信息
updateUserInfo(state, userinfo) {
state.userinfo = userinfo
this.commit('saveUserInfoToStorge')
},
// 将用户信息持久化存储到本地
saveUserInfoToStorge(state) {
uni.setStorageSync('userinfo', JSON.stringify(state.userinfo))
},
// 更新 token 字符串
updateToken(state, token) {
state.token = token
// 调用saveTokenToStorage方法
this.commit('saveTokenToStorage')
},
// 将 token 字符串持久化存储到本地
saveTokenToStorage(state) {
uni.setStorageSync('token', state.token)
}
}
})
- 创建一个按钮并添加触发事件
<button type="primary" @click="getUserInfo">一键登录</button>
- 调用官方
uni.getUserProfile()接口获取用户信息，并储存到Vuex中
getUserInfo() {
uni.getUserProfile({
//声明获取用户个人信息后的用途(必填)
desc: "仅用作登录功能",
success: (res) => {
//调用Vuex中的updateUserInfo()方法，将用户信息存储到Vuex中
this.updateUserInfo(res.userInfo)
},
fail: () => {
uni.$showMsg('您取消了登录授权！')
}
})
},
- 调用官方
uni.login()接口获取临时登录凭证code
const res = await uni.login().catch(err => err)
//判断是否获取成功
if (res.errMsg !== 'login:ok') return uni.$showMsg('登录失败！')
- 调用后端的登录接口将code 传过去，后端会返回一个token值，将token值储存到Vuex中并持久化保存到本地中
//换取token
const {
data: loginResult } = await uni.$http.post(`/wx/login?code=${
res.code}`)
//将token值存储到Vuex中
this.updateToken(loginResult.data.ticket)
-
登录成功！渲染用户信息到页面中
-
创建一个退出登录按钮并添加触发事件
<button @click="logout">退出登录</button>
- 定义
logout事件处理函数
// 退出登录
async logout() {
// 询问用户是否退出登录
const [err, succ] = await uni.showModal({
title: '提示',
content: '确认退出登录吗？'
}).catch(err => err)
if (succ && succ.confirm) {
// 用户确认了退出登录的操作
// 清空 vuex 中的 userinfo、token
this.updateUserInfo({
})
this.updateToken('')
}
}
- 退出成功！并跳转到其他页面
uni.switchTab({
//跳转到主页
url: '../../pages/home/home',
success: () => {
//跳转成功后提示退出成功
uni.$showMsg('退出成功')
},
})
总结
总体流程并不复杂，登录就是调用两个官方接口和一个后台接口获取用户信息和token值，退出登录就是清除储存的用户信息和token值。
本文同步更新到我的博客，欢迎大家前来访问！
https://blog.zlpo.xyz/