亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

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

起因

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

總體思路

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

詳細流程

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

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')
		},
		// 將用戶信息持久化存儲到本地
		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)
		}
	}
})

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

<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)

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

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

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

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

// 退出登錄
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值。

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

相關文章

最新評論