w3ctech

前端用户模块

在前端交互中难免会与用户交互,比如评论啊,用户中心啥的都需要用户是已登录状态,然后传统的登录方式是在需要登录的地方加判断,如果没登录则跳转到登录页,并在登录成功后返回当前页,功能是实现了,但整个交互略繁琐,如果说用户是在评论呢,输入了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(){
    //退出状态 
});

致此整个用户模块完成,当然还有的地方不够完善,可以初步应用下,并结合需求功能的时候优化她,最后祝大家周末高兴~

w3ctech微信

扫码关注w3ctech微信公众号

共收到3条回复

  • 回复此楼
  • 又涨知识了

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

    回复此楼