前端用户模块

Question

在前端交互中难免会与用户交互，比如评论啊，用户中心啥的都需要用户是 已登录 状态，然后传统的登录方式是在需要登录的地方加判断，如果没登录则跳转到登录页，并在登录成功后返回当前页，功能是实现了，但整个交互略繁琐，如果说用户是在评论呢，输入了100个字，然后一点发布就跳转了，然后发现登录后字没了，是不是会哭，然后去 12305 举报呢？（ps：当然可以把这些数据存下来，但整个过程还是繁琐）

再后来很多大站都使用 弹出层 的登录方式，比如百度，土豆，然而在前2年（差不多），那时候土豆做的特帅气，于是我就萌生一种想法，我也做一个这样的模块方便全局使用（2012年）

整个思路

首先与后端约定用户登录的标识，以加密的cookie存在根域上，页面加载完js读取她判断是否登录，并打上状态，用户在调用方法时判断标识，如果已登录则执行回调，如果没登录则缓存回调并登录，登录成功则执行回调并打上标识，退出时清空标识。

整个过程都可以不刷新页面，当然视项目而定。

用户初始化

在页面加载完成后自我执行，并判断 cookie 标识，打上登录状态标识。

开发者调用登录

开发者以回调的方式调用登录接口，如果当前的登录标识为 已登录 则直接执行回调，如果为未登录，则弹出层登录并在成功后执行回调（打上登录标识）。

开发者调用退出

开发都调用退出接口后把登录标识清空。

Api

登录

• User.login(callback) 执行登录接口，如果为已登录则直接执行callback，如果未登录则弹层登录成功执行callback
• User.login(title, callback) 在上面接口上添加可定义弹层层窗口的标题
• User.login(object)：

User.login({
    is_open: false,//是否打开新窗口登录，其实就是打开登录页，该登录页面需要做特殊处理，如果是User打开则在成功执行父窗口回调
    callback: function(){},//登录成功回调
    title: null,//弹出层登录标题
})

检查是否登录

User.check() 返回以boolean表示的是否登录

退出

User.exit() 退出

因登录模块为公用模块，可能会牵扯到页面登录的状态，比如登录前是一种ui登录后是一种，且这是在不同逻辑文件里形成，于是要加上事件驱动

绑定事件

User.on(event_name, callback) 内部提供两种事件机制，登录(login),退出(exit) 事件，在执行该指定操作时触发回调，支持绑定多个，比如：

User.on('login', function(data){
    //this === User
    //data === 用户数据
}).on('exit', function(){
    
}).on('login', function(){});

卸载事件

User.off(event_name [, callback]) 如果 callback 存在则只卸载匹配的事件，否则卸载全部 event_name 事件

触发事件

User.trigger(event_name, data) data 为数组，使用这个数组来触发 event_name 的事件

更多事件相关请移步：Event

弹出登录层的逻辑

如果执行登录接口时，在没有登录状态下，画出弹出层在屏幕，并绑定表单的事件，在异步登录成功后执行回调

遇到的问题

跨域

因为全局的，可能涉及到多个子域名，起初想到使用jsonp来解决，可这就造成谁都可以很轻松的访问，于是使用后端代理的方式，比如不管什么子域名都调用/ajax/user目录下的相关接口，当然如果只是兼容标准浏览器方法就多了

用户信息

可能页面中会显示用户的信息，如果只是简单的用户名可以cookie来存，如果数据量比较大，可以在绑定登录事件后去读取用户的信息并渲染到页面，并且要绑定退出的相关操作

扩展

其实User.js完成整个登录的逻辑，你完全可以扩展出更多的功能，还可以统一优化这个用户的模块，比如体验更友好，各种容错处理

第三方登录

弹出层可能会涉及到第三方登录相关，这里可以做下兼容，在点击第三方登录时弹出窗口登录，成功后执行父窗口的User.api_login(data)来登录上，还可以扩展出第三方登录的类型，并且还可以在第三方登录成功后让其绑定信息之类的

弹出层扫二维码登录

其实整个弹出层登录比较独立，你完全可以做很多登录相关的体验功能，比如扫码，短信之类的

登录次数限制

比如在密码输入错误三次后输入验证码，在验证码输入十次错误后不让其登录等，当然这需要后端提供相关支持

各种登录后的异步操作

在这个模块基础上还可以添加很多登录后操作的方法，比如收藏菜单，添加菜谱，等一列表接口

demo 例子

点击某个按钮登录后跳转

$('#demo').on('click', function(){
    User.login('请先登录再跳转', function(){
        location.href = '/';
    });
});

评论登录

//异步
$('#comment_form').on('submit', function(){
    User.login('请先登录再发布', (){
        $.ajax({
        });
    });
});

//跳转
$('#comment_form').on('submit', function(){
    if(User.check()){
        return true;//返回true提交
    }

    User.login('请先登录再发布', (){
        $('#comment_form').submit();//登录后再提交就好了
    });
    return false;
});

多模块渲染页面状态

//a.js
User.on('login', function(){
    //登录状态
}).on('exit', function(){
    //退出状态 
});

//b.js
User.on('login', function(){
    //登录状态
}).on('exit', function(){
    //退出状态 
});

致此整个用户模块完成，当然还有的地方不够完善，可以初步应用下，并结合需求功能的时候优化她，最后感觉FED社区的体验真心的不错，以后常来~