前端用户模块
在前端交互中难免会与用户交互,比如评论啊,用户中心啥的都需要用户是已登录
状态,然后传统的登录方式是在需要登录的地方加判断,如果没登录则跳转到登录页,并在登录成功后返回当前页,功能是实现了,但整个交互略繁琐,如果说用户是在评论呢,输入了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(){ //退出状态 });
致此整个用户模块完成,当然还有的地方不够完善,可以初步应用下,并结合需求功能的时候优化她,最后祝大家周末高兴~
扫一扫订阅我的微信号:IT技术博客大学习
- 作者:前端小武 来源: 前端小武
- 标签: 用户模块
- 发布时间:2016-04-02 22:34:34
- [65] Oracle MTS模式下 进程地址与会话信
- [64] Go Reflect 性能
- [64] 如何拿下简短的域名
- [59] IOS安全–浅谈关于IOS加固的几种方法
- [58] 【社会化设计】自我(self)部分――欢迎区
- [58] 图书馆的世界纪录
- [56] android 开发入门
- [53] 视觉调整-设计师 vs. 逻辑
- [46] 读书笔记-壹百度:百度十年千倍的29条法则
- [45] 界面设计速成