小程序實現(xiàn)登錄功能
本文實例為大家分享了小程序實現(xiàn)登錄功能的具體代碼，供大家參考，具體內容如下
小程序可以通過微信官方提供的登錄能力方便地獲取微信提供的用戶身份標識，快速建立小程序內的用戶體系。
1、前端調用wx.login獲取code，再調用后端接口傳遞code
注意：code是臨時的，只有5分鐘的使用時間，而且只能使用一次
2、后端用獲取的code與微信接口服務換取openid（用戶唯一標識）與session_key（可以用于解密私密信息encrydata，現(xiàn)在只能獲取頭像和昵稱），然后生成一個自定義登錄狀態(tài)的token，自定義登錄態(tài)與openid和session_keysession關聯(lián)。
注意：不可以把解析出來的openid和session_key直接返回給前端，會造成信息安全問題
3、將token返回給前端
4、前端緩存token
5、用戶登錄時，登錄接口獲取到token，再調用其他接口時，攔截器進行攔截，如果token有效，則放行請求；如果token失效（不存在、過期、格式不正確等原因），則無法訪問該接口，需要重新登錄。
說明：如果覺得token驗證太過復雜，也可以退而求其次，采用微信小程序自帶的wx.checkSeesion檢查下發(fā)的session_key是否過期（固定為兩天）。
wx.checkSeesion是前端檢查，非常方便，但是缺點也很明顯：耗時長，通常需要300+ms ，另外前后端傳遞私密數(shù)據(jù)時，需要額外考慮數(shù)據(jù)安全問題（以openid為例，前端每次需要傳遞openid時，都需要先獲取臨時code，再傳遞給后端，后端再用code換取openid，開銷極大），因此正式開發(fā)時極不建議使用wx.checkSeesion，token驗證方式可以較好解決上述問題。
核心代碼：
// pages/my/my.js
Page({
? ? /**
? ? ?* 頁面的初始數(shù)據(jù)
? ? ?*/
? ? data: {
? ? ? ? loginOk: false,
? ? ? ? userInfo: null
? ? },
? ? /**
? ? ?* 生命周期函數(shù)--監(jiān)聽頁面加載
? ? ?*/
? ? onLoad: function (options) {
? ? ? ? //驗證是否登錄
? ? ? ? this.checklogin()
? ? },
? ? checklogin() {
? ? ? ? const token = wx.getStorageSync('token')
? ? ? ? const that = this
? ? ? ? if (token) {
? ? ? ? ? ? wx.request({
? ? ? ? ? ? ? ? url: 'http://127.0.0.1:3000/checklogin',
? ? ? ? ? ? ? ? method: 'get',
? ? ? ? ? ? ? ? data:{
? ? ? ? ? ? ? ? ? ? token:token
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? success(res) {
? ? ? ? ? ? ? ? ? ? that.setData({?
? ? ? ? ? ? ? ? ? ? ? ? loginOk: res.data.is_login,
? ? ? ? ? ? ? ? ? ? ? ? userInfo: res.data.userInfo
? ? ? ? ? ? ? ? ? ? ?})
? ? ? ? ? ? ? ? }
? ? ? ? ? ? })
? ? ? ? } else {
? ? ? ? ? ? that.setData({ loginOk: false })
? ? ? ? }
? ? },
? ? login() {
? ? ? ? const that = this
? ? ? ? // 推薦使用wx.getUserProfile獲取用戶信息，開發(fā)者每次通過該接口獲取用戶個人信息均需用戶確認，開發(fā)者妥善保管用戶快速填寫的頭像昵稱，避免重復彈窗
? ? ? ? wx.getUserProfile({
? ? ? ? ? ? desc: '展示用戶信息', // 聲明獲取用戶個人信息后的用途，后續(xù)會展示在彈窗中，請謹慎填寫
? ? ? ? ? ? success(res){
? ? ? ? ? ? ? ? const userInfo = res.userInfo
? ? ? ? ? ? ? ? console.log(userInfo)
? ? ? ? ? ? ? ? // 登錄
? ? ? ? ? ? ? ? wx.login({
? ? ? ? ? ? ? ? ? ? success(res) {
? ? ? ? ? ? ? ? ? ? ? ? if (res.code) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? //發(fā)起網絡請求
? ? ? ? ? ? ? ? ? ? ? ? ? ? wx.request({
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? url: 'http://127.0.0.1:3000/getSession',
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? method: 'post',
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? data: {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? code: res.code,
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? userInfo:userInfo
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? success(res) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? // 將token保存到數(shù)據(jù)緩存（下次打開小程序無需重新獲取token）
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? wx.setStorageSync('token', res.data.token)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? that.setData({?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? loginOk: true,
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? userInfo: userInfo
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?})
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? })
? ? ? ? ? ? }
? ? ? ? })
? ? },
? ? //退出登錄
? ? exit() {
? ? ? ? wx.showModal({
? ? ? ? ? ? content: "確定退出嗎"
? ? ? ? }).then(res => {
? ? ? ? ? ? if (res.confirm) {
? ? ? ? ? ? ? ? this.setData({
? ? ? ? ? ? ? ? ? ? loginOk: false
? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? //清空登錄的緩存
? ? ? ? ? ? ? ? wx.removeStorageSync('token')
? ? ? ? ? ? } else if (res.cancel) {
? ? ? ? ? ? ? ? wx.showToast({
? ? ? ? ? ? ? ? ? title: '取消',
? ? ? ? ? ? ? ? ? icon:'error'
? ? ? ? ? ? ? ? })
? ? ? ? ? ? }
? ? ? ? })
? ? }
})以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了JavaScript中一些特殊的字符運算的相關資料,需要的朋友可以參考下2017-08-08
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)隨機驗證碼功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-12-12
這篇文章主要介紹了使用Threejs加載外部glb文件方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04
枚舉是 TypeScript 中一個非常有趣且實用的特性，它可以讓我們更好地組織和管理代碼，下面就來和大家聊聊TypeScript中枚舉的具體使用吧2023-06-06
下面小編就為大家?guī)硪黄猨avascript幀動畫(實例講解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
JS基于ocanvas插件實現(xiàn)的簡單畫板效果代碼(附demo源碼下載)
這篇文章主要介紹了JS基于ocanvas插件實現(xiàn)的簡單畫板效果,結合實例形式分析了ocanvas插件實現(xiàn)畫板的相關技巧,并附代碼demo源碼供讀者下載參考,需要的朋友可以參考下2016-04-04
js使用Array.prototype.sort()對數(shù)組對象排序的方法
這篇文章主要介紹了js使用Array.prototype.sort()對數(shù)組對象排序的方法,實例分析了Array.prototype.sort()的原理與相關的使用技巧,需要的朋友可以參考下2015-01-01
解決ie11 SCRIPT5011:不能執(zhí)行已釋放Script的代碼問題
這篇文章主要介紹了ie11 SCRIPT5011:不能執(zhí)行已釋放Script的代碼 ,需要的朋友可以參考下2019-05-05
這篇文章主要介紹了JavaScript函數(shù)作用域鏈,實例分析了函數(shù)作用域鏈的原理與使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02
JavaScript字符和ASCII實現(xiàn)互相轉換
這篇文章主要介紹了JavaScript字符和ASCII實現(xiàn)互相轉換,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-06-06