微信小程序|基于uni-app实现微信小程序一键登录和退出登录功能小程序|javascript

起因 【微信小程序|基于uni-app实现微信小程序一键登录和退出登录功能】目前正在使用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) } } })

创建一个按钮并添加触发事件

调用官方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)

登录成功！渲染用户信息到页面中
创建一个退出登录按钮并添加触发事件

定义 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('') } }