如何基于uni-app實(shí)現(xiàn)微信小程序一鍵登錄與退出登錄功能
起因
目前正在使用uni-app開(kāi)發(fā)一個(gè)微信小程序,開(kāi)發(fā)到登錄模塊時(shí)通過(guò)查閱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 傳過(guò)去獲取token 值
- 登錄成功!渲染用戶信息到頁(yè)面中
- 創(chuàng)建一個(gè)退出登錄按鈕并添加觸發(fā)事件
- 清空 vuex 中的 userinfo和token
- 退出成功!跳轉(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)文章
在table中插入多行,能使用與insertAdjacentHTML相似的功能嗎?
在table中插入多行,能使用與insertAdjacentHTML相似的功能嗎?...2006-12-12JS在一定時(shí)間內(nèi)跳轉(zhuǎn)頁(yè)面及各種刷新頁(yè)面的實(shí)現(xiàn)方法
這篇文章主要介紹了JS在一定時(shí)間內(nèi)跳轉(zhuǎn)頁(yè)面及各種刷新頁(yè)面的實(shí)現(xiàn)方法的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-05-05WordPress中鼠標(biāo)懸停顯示和隱藏評(píng)論及引用按鈕的實(shí)現(xiàn)
這篇文章主要介紹了WordPress中鼠標(biāo)懸停顯示和隱藏評(píng)論及引用按鈕的實(shí)現(xiàn),順帶顯示和隱藏評(píng)論者信息的實(shí)現(xiàn)方法,非常實(shí)用,需要的朋友可以參考下2016-01-01js方法數(shù)據(jù)驗(yàn)證的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇js方法數(shù)據(jù)驗(yàn)證的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-09-09