变脸式应用 / 进入与退出应用（二）

登录与退出

登录和退出是多数应用都需要的功能。

我们在筋斗云示例应用中，可以看到登录退出相关的代码：(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函数刷新应用回到入口。