如何基于uni-app實(shí)現(xiàn)微信小程序一鍵登錄與退出登錄功能

更新時(shí)間：2022年09月15日 15:25:35 作者：時(shí)北Leo

uni-app 是使用vue的語法+小程序的標(biāo)簽和API的一套框架,是一套代碼多端使用,目前是大前端的一種趨勢,下面這篇文章主要給大家介紹了關(guān)于如何基于uni-app實(shí)現(xiàn)微信小程序一鍵登錄與退出登錄功能的相關(guān)資料,需要的朋友可以參考下

起因

目前正在使用uni-app開發(fā)一個(gè)微信小程序，開發(fā)到登錄模塊時(shí)通過查閱uni-app官方教程、微信小程序官方文檔、網(wǎng)上的教程終于是實(shí)現(xiàn)了微信小程序的登錄模塊，現(xiàn)總結(jié)分享給大家，共同學(xué)習(xí)。

總體思路

創(chuàng)建Vuex進(jìn)行狀態(tài)管理（可根據(jù)實(shí)際需求自行選擇是否使用）
創(chuàng)建一個(gè)登錄按鈕并添加觸發(fā)事件
調(diào)用官方uni.getUserProfile() 接口獲取用戶信息
調(diào)用官方uni.login() 接口獲取臨時(shí)登錄憑證code
調(diào)用后端的登錄接口將code 傳過去獲取token 值
登錄成功！渲染用戶信息到頁面中
創(chuàng)建一個(gè)退出登錄按鈕并添加觸發(fā)事件
清空 vuex 中的 userinfo和token
退出成功！跳轉(zhuǎn)到其他頁面

詳細(xì)流程

創(chuàng)建Vuex進(jìn)行狀態(tài)管理，用于全局存放token和用戶信息方便使用。（可根據(jù)實(shí)際需求自行選擇是否使用）

token 可用于判斷用戶是否已登錄，以及作為后續(xù)的訪問憑證

const store = createStore({
	state: {
		"token": uni.getStorageSync('token') || '',
		"userinfo": JSON.parse(uni.getStorageSync('userinfo') || '{}')
	},
	mutations: {
		// 更新用戶信息
		updateUserInfo(state, userinfo) {
			state.userinfo = userinfo
			this.commit('saveUserInfoToStorge')
		},
		// 將用戶信息持久化存儲(chǔ)到本地
		saveUserInfoToStorge(state) {
			uni.setStorageSync('userinfo', JSON.stringify(state.userinfo))
		},
		// 更新 token 字符串
		updateToken(state, token) {
			state.token = token
			// 調(diào)用saveTokenToStorage方法
			this.commit('saveTokenToStorage')
		},

		// 將 token 字符串持久化存儲(chǔ)到本地
		saveTokenToStorage(state) {
			uni.setStorageSync('token', state.token)
		}
	}
})

創(chuàng)建一個(gè)按鈕并添加觸發(fā)事件

<button type="primary" @click="getUserInfo">一鍵登錄</button>

調(diào)用官方uni.getUserProfile() 接口獲取用戶信息，并儲(chǔ)存到Vuex中

getUserInfo() {
	uni.getUserProfile({
        //聲明獲取用戶個(gè)人信息后的用途(必填)
		desc: "僅用作登錄功能",
		success: (res) => {
            //調(diào)用Vuex中的updateUserInfo()方法，將用戶信息存儲(chǔ)到Vuex中
			this.updateUserInfo(res.userInfo)
		},
		fail: () => {
			uni.$showMsg('您取消了登錄授權(quán)！')
		}
	})
},

調(diào)用官方uni.login() 接口獲取臨時(shí)登錄憑證code

const res = await uni.login().catch(err => err)
//判斷是否獲取成功
if (res.errMsg !== 'login:ok') return uni.$showMsg('登錄失?。?)

調(diào)用后端的登錄接口將code 傳過去，后端會(huì)返回一個(gè)token值，將token值儲(chǔ)存到Vuex中并持久化保存到本地中

//換取token
const { data: loginResult } = await uni.$http.post(`/wx/login?code=${res.code}`)
//將token值存儲(chǔ)到Vuex中
this.updateToken(loginResult.data.ticket)

登錄成功！渲染用戶信息到頁面中

創(chuàng)建一個(gè)退出登錄按鈕并添加觸發(fā)事件

<button @click="logout">退出登錄</button>

定義 logout 事件處理函數(shù)

// 退出登錄
async logout() {
  // 詢問用戶是否退出登錄
  const [err, succ] = await uni.showModal({
    title: '提示',
    content: '確認(rèn)退出登錄嗎？'
  }).catch(err => err)

  if (succ && succ.confirm) {
     // 用戶確認(rèn)了退出登錄的操作
     // 清空 vuex 中的 userinfo、token
     this.updateUserInfo({})
     this.updateToken('')
  }
}

退出成功！并跳轉(zhuǎn)到其他頁面

uni.switchTab({
    //跳轉(zhuǎn)到主頁
	url: '../../pages/home/home',
	success: () => {
        //跳轉(zhuǎn)成功后提示退出成功
		uni.$showMsg('退出成功')
	},
})

總結(jié)

總體流程并不復(fù)雜，登錄就是調(diào)用兩個(gè)官方接口和一個(gè)后臺(tái)接口獲取用戶信息和token值，退出登錄就是清除儲(chǔ)存的用戶信息和token值。

到此這篇關(guān)于如何基于uni-app實(shí)現(xiàn)微信小程序一鍵登錄與退出登錄功能的文章就介紹到這了,更多相關(guān)uni-app微信小程序一鍵登錄與退出登錄內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: