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

起因

目前正在使用uni-app开发一个微信小程序,开发到登录模块时通过查阅uni-app官方教程、微信小程序官方文档、网上的教程终于是实现了微信小程序的登录模块,现总结分享给大家,共同学习。

数据处理

总体思路

  1. 创建Vuex进行状态管理(可根据实际需求自行选择是否使用)

    小程序多选select

  2. 创建一个登录按钮并添加触发事件

    设计规范

  3. 调用官方uni.getUserProfile() 接口获取用户信息

    中断

  4. 调用官方uni.login() 接口获取临时登录凭证code

    回调

  5. 调用后端的登录接口将code 传过去获取token

    瀹夊叏

  6. 登录成功!渲染用户信息到页面中

    telnet

  7. 创建一个退出登录按钮并添加触发事件

    格式

  8. 清空 vuex 中的 userinfotoken

    fs

  9. 退出成功!跳转到其他页面

    raft

详细流程

  1. 创建Vuex进行状态管理,用于全局存放token用户信息方便使用。(可根据实际需求自行选择是否使用)

token 可用于判断用户是否已登录,以及作为后续的访问凭证

MQTT

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)
		}
	}
})
  1. 创建一个按钮并添加触发事件
<button type="primary" @click="getUserInfo">一键登录</button>
  1. 调用官方uni.getUserProfile() 接口获取用户信息,并储存到Vuex中
getUserInfo() {
	uni.getUserProfile({
        //声明获取用户个人信息后的用途(必填)
		desc: "仅用作登录功能",
		success: (res) => {
            //调用Vuex中的updateUserInfo()方法,将用户信息存储到Vuex中
			this.updateUserInfo(res.userInfo)
		},
		fail: () => {
			uni.$showMsg('您取消了登录授权!')
		}
	})
},
  1. 调用官方uni.login() 接口获取临时登录凭证code
const res = await uni.login().catch(err => err)
//判断是否获取成功
if (res.errMsg !== 'login:ok') return uni.$showMsg('登录失败!')
  1. 调用后端的登录接口将code 传过去,后端会返回一个token值,将token值储存到Vuex中并持久化保存到本地中
//换取token
const { data: loginResult } = await uni.$http.post(`/wx/login?code=${res.code}`)
//将token值存储到Vuex中
this.updateToken(loginResult.data.ticket)
  1. 登录成功!渲染用户信息到页面中

    观察者模式

  2. 创建一个退出登录按钮并添加触发事件

    格雷码计数器

<button @click="logout">退出登录</button>
  1. 定义 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('')
  }
}
  1. 退出成功!并跳转到其他页面
uni.switchTab({
    //跳转到主页
	url: '../../pages/home/home',
	success: () => {
        //跳转成功后提示退出成功
		uni.$showMsg('退出成功')
	},
})

总结

总体流程并不复杂,登录就是调用两个官方接口和一个后台接口获取用户信息token值,退出登录就是清除储存的用户信息token值。

基础知识

本文同步更新到我的博客,欢迎大家前来访问!
https://blog.zlpo.xyz/

Future

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注