欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

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

起因

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

總體思路

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

詳細(xì)流程

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

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

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 傳過(guò)去,后端會(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)

登錄成功!渲染用戶信息到頁(yè)面中

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

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

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

// 退出登錄
async logout() {
  // 詢問(wèn)用戶是否退出登錄
  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)到其他頁(yè)面

uni.switchTab({
    //跳轉(zhuǎn)到主頁(yè)
	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)文章希望大家以后多多支持腳本之家!

相關(guān)文章

最新評(píng)論