构建前端用户系统之登录退出

前端页面中难免会有一些静态HTML文件, 这时就会遇到用户状态的判断问题, 于是想到使用js的ajax请求来处理整个前端用户相关的东东...
版本一

思路是在页面中指定位置预留一个js钩子, 然后在页面加载完成后向后端发送ajax请求, 判断用户是否登录, 并写到钩子里相应文本. 于是版本一产生了...

(function($){
var user = window.user = {};

// 用户数据
user.data = {};

// 用户状态, 0未登录, 非0则视为已登录, 可扩展为用户等级
user.status = 0;

/**
* 初始化
* @return {object} user对象
*/
user.init = function(){
//负责从后端ajax请求用户是否登录, 如果已登录则返回用户相关信息, 否则视为未登录
//请求完成后改变用户的status状态, 并把用户信息写入到user.data上

$.get("后端url", function(res){
if(res.error === 0){//返回值同后端协定
user.status = 1;
user.data.userName = res.data.userName;//模拟用户名
} else {
user.status = 0;
user.data = {};
}

//渲染状态到页面
user._renderHTML();
}, ‘json‘);

//模拟惰性方法以防止页面多次使用
user.init = function(){
return user;
}

return user;
}

/**
* 用户登录
* @param {Function} callback 回调
* @return {object} user对象
*/
user.login = function(callback){
if("function" === typeof callback){
if(user.status !== 0){//如果用户已登录则直接运行回调, 参数为用户数据
callback.call(user, user.data);
} else {
//未登录时弹出用户登录层,让其登录, 登录完成后刷新当前页面, 当然也可以像 youku 一样不刷新页面, 但要做的工作非常多, 这里不解释
}
}

return user;
}

/**
* 渲染用户状态到页面, 当前为模拟用
*/
user._renderHTML = function(){
var html;

if(user.status !== 0){//已登录
html = ‘您好 ‘+ user.data.userName +‘ , <a href="#">退出</a>‘;
} else {
html = ‘请先登录<a href="#">登录</a>‘;
}

$("#J_bar_html").html(html);
}
}(jQuery));

页面中可以这么干:

<a href="javascript:;" id="J_set_fav">点击收藏</a>
<script type="text/javascript">
user.init();//初始化用户

$("#J_set_fav").on("click", function(){
user.login(function(){//回调必须是登录状态下使用, 如果没有登录会执行画出登录框让用户登录
alert("正在收藏");
});
});
</script>

版本二

于是页面中可能需要判断用户是否登录, 还有退出登录, 在版本一的基础上添加 检查和退出方法, 但这些退出和检查只是依据后端的返回值, 且退出只是前端静态退出, 当然你也可以向后端发送ajax

/**
* 前端退出
* @return {object} user对象
*/
user.exit = function(){
user.status = 0;
user.data = {};
user._renderHTML();//重置下页面状态
return user;
}

/**
* 检查用户是否已经登录
* @return {boolean} true为登录, false为未登录
*/
user.check = function(){
return user.status !== 0;
}

经过以上代码后前端的登录退出就基本完成了, 但由于每次都要请求后端, 而这个请求是异步的, 如果返回响应时间过长, 那么在这个时间段使用 user.login, user.check 是不正确的, 因为是在ajax完成后才能正确的设置用户的登录状态, 这也好比domReady事件一样, dom树都没有建立成功就使用dom对象了, 就报错了啊... 于是她有domReady, 咱有userReady...于是版本三产生了...
版本三

在版本二的基础上添加 ready 事件, 确保必须在用户初始完成后才执行代码...

var isReady = false,//用户是否初始完毕
readyList = [];//初始化回调列表

/**
* 渲染用户状态到页面, 当前为模拟用
*/
user._renderHTML = function(){
// ...
runList();//因为已经渲染完页面了, 可以执行ready回调事件了
}

/**
* 用户ready事件
* @param {Function} callback 初始完成后回调
* @return {object} user对象
*/
user.ready = function(callback){
if("function" === typeof(callback)){
if(isReady){//如果已经初始完毕
callback.call(user, user.data);
} else {//没有的话则追加到回调列表
readyList.push({
callback: callback
});
}
}

return user;
}

/**
* 执行回调事件
*/
function runList (){
var i = 0,
len = readyList.length;
if(len > 0){
for(;i<len;i++){
readyList.callback && readyList.callback.call(user, user.data);
}
}

isReady = true;//设置为已经初始完毕
readyList.length = 0;//重置回调
runList = $.noop;//惰性方法
}

这样来使用以确保必须在用户判断结束后才绑定事件, 从而解决误判断带来的用户体验丢失:

<a href="javascript:;" id="J_set_fav">点击收藏</a>
<script type="text/javascript">
user.init();//初始化用户

user.ready(function(){
if(user.check()){alert("已登录");} else {alert("未登录");}
$("#J_set_fav").on("click", function(){
user.login(function(){//回调必须是登录状态下使用, 如果没有登录会执行画出登录框让用户登录
alert("正在收藏");
});
});
});
</script>

整个前端登录, 退出大概架构就是这样了, 当然还可以对接第三方登录, 注册等方法. 还可以扩展出一些用户相关的操作, 如: 收藏啊, 添加关注啊等等.

注: 只是代码思路, 具体代码可优化, 可精简, 且跟据实际情况订制不同的功能.

构建前端用户系统之登录退出