進入與退出應用 / 登入與退出

天笑發表於2017-02-21
原文網址 : http://www.ituring.com.cn/article/274331

登入與退出

登入和退出是多數應用都需要的功能。

我們在筋斗雲示例應用中，可以看到登入退出相關的程式碼：(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函式重新整理應用回到入口。

相關文章