變臉式應用 / 進入與退出應用（二）

登錄與退出

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

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