如何基于uni-app實現(xiàn)微信小程序一鍵登錄與退出登錄功能
起因
目前正在使用uni-app開發(fā)一個微信小程序,開發(fā)到登錄模塊時通過查閱uni-app官方教程、微信小程序官方文檔、網(wǎng)上的教程終于是實現(xiàn)了微信小程序的登錄模塊,現(xiàn)總結分享給大家,共同學習。
總體思路
- 創(chuàng)建Vuex進行狀態(tài)管理(可根據(jù)實際需求自行選擇是否使用)
- 創(chuàng)建一個登錄按鈕并添加觸發(fā)事件
- 調用官方uni.getUserProfile() 接口獲取用戶信息
- 調用官方uni.login() 接口獲取臨時登錄憑證code
- 調用后端的登錄接口將code 傳過去獲取token 值
- 登錄成功!渲染用戶信息到頁面中
- 創(chuàng)建一個退出登錄按鈕并添加觸發(fā)事件
- 清空 vuex 中的 userinfo和token
- 退出成功!跳轉到其他頁面
詳細流程
創(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ù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
在table中插入多行,能使用與insertAdjacentHTML相似的功能嗎?
在table中插入多行,能使用與insertAdjacentHTML相似的功能嗎?...2006-12-12JS在一定時間內跳轉頁面及各種刷新頁面的實現(xiàn)方法
這篇文章主要介紹了JS在一定時間內跳轉頁面及各種刷新頁面的實現(xiàn)方法的相關資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2016-05-05WordPress中鼠標懸停顯示和隱藏評論及引用按鈕的實現(xiàn)
這篇文章主要介紹了WordPress中鼠標懸停顯示和隱藏評論及引用按鈕的實現(xiàn),順帶顯示和隱藏評論者信息的實現(xiàn)方法,非常實用,需要的朋友可以參考下2016-01-01