访问 用户档案 页面，如果用户没有登录的话，可以把用户重定向到 用户登录 页面，登录成功以后，再返回 用户档案 页面。 这个视频我们一起来实现这个功能。

index.js

在 用户档案 页面加载以后，会去执行 getCurrentUser，在这个函数里，我们可以去判断一下获取到的用户的 ID ，如果用户的 id 是 0 的话，说明是匿名用户，也就是没有登录到网站的用户。

如果是这样，可以把用户重定向到用户登录页面，如果用户的 id 不是 0 ，就去把用户的相关信息显示到页面上 ... 先定义几个需要用到的变量 ...

var uid = data.user.uid,
userName = null,
userCreated = null;

然后用一个 if 语句，去判断一下 uid 是不是为 0 .. 如果是，就去执行一个重定向的动作 ... 可以调用 jQueryMobile 的 pagecontainer 的 change 方法 ...

$('body').pagecontainer('change', '#user-login');

要重定向到的地方就是 #user-login ，也就是用户登录页面 ... 如果用户的 uid 不是 0 ，用一个 else ，把这段代码放在这个花括号里 ...

再去修改一下 userLogin 这个函数 ... 当用户成功登录以后，可以把用户重定向到用户档案页面 ..

$('body').pagecontainer('change', '#user-profile');

用户登出

下面，我们可以再去修改一下 用户登出 的代码 ... 先取消之前的注释 ... 然后定义一个函数 ... 叫做 userLogout ... 把这个用户登出的代码放在这个函数里面 ...

登出成功以后 ... 可以把用户重定向到首页上 ...

$('body').pagecontainer('change', '#front');

再去指定一下在什么时候，去执行这个登出的动作 ... 在登出的按钮上，定义了一个 user-logout 的类 ... 用这个类可以获取到这个按钮 .. 再用一个 jQuery 的 click 方法 ... 在方法里面，指定要做的事 ... 就是去执行 userLogout 函数 ...

// 点击页面底部 登出 按钮时执行 userLogout()
$('.user-logout').click(userLogout);

表单的默认行为

提交表单的时候，会有一些默认的行为，我们可以用一个方法防止表单的默认行为 .. 找到页面上的表单 ... 调用 on 方法，给它绑定一个 submit 事件，在表单上发生这个事件的时候，调用事件对象的 preventDefault 方法，可以防止表单的默认行为。

// 防止表单默认的行为
$("form").on("submit", function (event) {
event.preventDefault();
});

预览

保存一下文件 ... 回到浏览器 ... 现在我们在应用的首页上 ... 并且没有登录 ... 点击页面右上角的 用户 图标 ... 页面显示以后会去执行 getCurrentUser .. 因为还没登录 ... 所以会把我重定向到 用户登录 的页面 ...

输入用户名 ... 密码 ... 点击 登录 ... 如果身份验证成功的话 ... 会把我重定向到 用户档案 页面 ... 因为现在已经登录了，所以，在用户档案页面上会显示出我的用户名，还有注册的时间。

点击右下角的 登出 按钮，会退出登录 ... 同时把用户重定向到应用的首页 ... 再打开 用户档案 页面 ...

现在又是匿名用户的身份，也就是用户的 uid 是 0，这样又会把用户重定向到用户登录的页面了 ...