進入與退出應用 / 登入與退出
登入與退出
登入和退出是多數應用都需要的功能。
我們在筋斗雲示例應用中,可以看到登入退出相關的程式碼:(index.js檔案)
function handleLogin(data)
{
MUI.handleLogin(data);
// g_data.userInfo已賦值
}
function logoutUser()
{
// 這裡可以刪除當前使用者相關的storage, cookie等。
MUI.logout();
}
handleLogin
將作為回撥函式在所有登入成功時統一呼叫,退出登入則呼叫logoutUser
函式。
筋斗雲提供這些函式:
- MUI.showLogin: 顯示登入頁。登入頁由選項MUI.options.loginPage指定, 預設為"#login".
- MUI.tryAutoLogin: 自動登入。下節介紹。
- MUI.handleLogin: 處理登入後頁面跳轉,同時給g_data.userInfo賦值,應用程式裡一般通過判斷
g_data.userInfo != null
判斷是否已登入。 - MUI.logout: 退出登入。
筋斗雲示例應用提供了兩個登入頁面,分別是手機號/動態驗證碼登入(page/login.html)和使用者名稱/密碼登入(page/login1.html)。
以較簡單的使用者名稱/密碼登入頁面(login1)為例,簡化後的程式碼如下:
HTML:(page/login1.html)
<div mui-initfn="initPageLogin1" mui-script="login1.js">
...
<form action="login" class="bd">
手機號 <input name="uname" required placeholder="11位手機號">
密碼 <input type="password" name="pwd" required placeholder="4位以上密碼" minlength=4>
<button type="submit" class="weui_btn weui_btn_primary">登入</button>
</form>
</div>
JS: (page/login1.js)
function initPageLogin1()
{
var jpage = $(this);
var jf = jpage.find("form");
MUI.setFormSubmit(jf, handleLogin);
}
這裡使用了callSvr
之外另一個常用的介面呼叫方式,即通過form提交呼叫後端介面的MUI.setFormSubmit
,其用法是:
- 在HTML的form標籤中,用action屬性定義介面名,這裡是"login"
- 介面引數通過form中帶name屬性的元件設定(這裡有"uname", "pwd"引數),注意預設情況下,form中的引數是通過POST方式傳送到後端。
- 在MUI.setFormSubmit中指定呼叫成功時的回撥函式為"handleLogin",它與callSvr的回撥一樣。
關於MUI.setFormSubmit的更多選項如合法性驗證、計算欄位賦值等,可查詢參考文件。
要退出登入,呼叫前面定義過的logoutUser
函式即可:
// 示例:個人中心頁面(#me)的初始化函式,為按鈕btnLogout繫結退出動作:
function initPageMe()
{
...
jpage.find("#btnLogout").click(logoutUser);
}
退出會導致頁面重重新整理後進入入口頁。要重新整理H5應用,也可以直接呼叫:
reloadSite();
如果你的應用的退出介面不同,可自行在logoutUser函式中實現MUI.logout的功能:
- 向後端呼叫
logout
介面; - 清除登入狀態,如置空g_data.userInfo,刪除本地儲存中的token等資訊;
- 再呼叫
reloadSite
函式重新整理應用回到入口。
相關文章
- 進入與退出應用
- 進入與退出應用 / 會話重用與自動登入會話
- FreeBSD系統登入與退出(轉)
- Flask——登入、退出Flask
- Auth Session 退出他人正登入的賬號、passport 退出登入SessionPassport
- 基於session的登入與退出思維導圖Session
- Java Servlet session實現登入退出JavaServletSession
- Flutter 登入退出功能注意事項Flutter
- Spring Boot退出登入注意點Spring Boot
- win10怎麼退出登入賬戶_win10電腦退出賬戶登入的方法Win10
- 關於app的登入退出內容APP
- 基於Openfire Smack開發即時通訊應用、Spark安裝,註冊,登入,退出登入(二)MacSpark
- HTML5進入全屏和退出全屏HTML
- Next.js-Cookie鑑權+續期+退出登入JSCookie
- 【ASP NET】UCenter實現多站點同步登入退出
- linux配置超時不操作自動退出登入TMOUTLinux
- Spring Security 實戰乾貨:實現自定義退出登入Spring
- Servlet+Session+Cookie登入、校驗、退出的邏輯程式碼ServletSessionCookie
- Android應用程式完全退出Android
- Qt入門(13)——Qt的呼叫退出QT
- 華碩bios退出不了迴圈怎麼辦 華碩開機無限進入bios怎麼退出iOS
- iOS 建立一個在退出登入時可以銷燬的單例iOS單例
- Android退出應用最優雅的方式(改進版)Android
- QuitAll for Mac(應用程式一鍵退出)UIMac
- 如何一鍵退出所有應用程式?
- 蘋果如何快速退出應用程式?蘋果
- Django2 Web 實戰02-使用者註冊登入退出DjangoWeb
- 入門與應用(三)
- Mac快速退出應用程式工具:Quit AllMacUI
- 使用者登入前臺之後,無法退出如何解決?謝謝
- Mac電腦睡眠、退出登入和關機快捷鍵有哪些?技巧來啦!Mac
- 解決Ecshop因為動態ip問題登入後臺自動退出
- 新浪微博共享登入後無法退出切換賬號問題解決
- 為Java應用程式新增退出事件響應Java事件
- 新手學習如何完全退出整個應用
- Android退出應用最優雅的方式Android
- Vue.js 實現使用者登入退出和 e2e 測試Vue.js
- SSH原理與運用(1):遠端登入