构建前端用户系统之登录退出
2014-08-15 11:14
274 查看
前端页面中难免会有一些静态HTML文件, 这时就会遇到用户状态的判断问题, 于是想到使用js的ajax请求来处理整个前端用户相关的东东...
版本一
思路是在页面中指定位置预留一个js钩子, 然后在页面加载完成后向后端发送ajax请求, 判断用户是否登录, 并写到钩子里相应文本. 于是版本一产生了...
版本二
于是页面中可能需要判断用户是否登录, 还有退出登录, 在版本一的基础上添加 检查和退出方法, 但这些退出和检查只是依据后端的返回值, 且退出只是前端静态退出, 当然你也可以向后端发送ajax
经过以上代码后前端的登录退出就基本完成了, 但由于每次都要请求后端, 而这个请求是异步的, 如果返回响应时间过长, 那么在这个时间段使用 user.login, user.check 是不正确的, 因为是在ajax完成后才能正确的设置用户的登录状态, 这也好比domReady事件一样, dom树都没有建立成功就使用dom对象了, 就报错了啊... 于是她有domReady, 咱有userReady...于是版本三产生了...
版本三
在版本二的基础上添加 ready 事件, 确保必须在用户初始完成后才执行代码...
这样来使用以确保必须在用户判断结束后才绑定事件, 从而解决误判断带来的用户体验丢失:
整个前端登录, 退出大概架构就是这样了, 当然还可以对接第三方登录, 注册等方法. 还可以扩展出一些用户相关的操作, 如: 收藏啊, 添加关注啊等等.
注: 只是代码思路, 具体代码可优化, 可精简, 且跟据实际情况订制不同的功能.
版本一
思路是在页面中指定位置预留一个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>
整个前端登录, 退出大概架构就是这样了, 当然还可以对接第三方登录, 注册等方法. 还可以扩展出一些用户相关的操作, 如: 收藏啊, 添加关注啊等等.
注: 只是代码思路, 具体代码可优化, 可精简, 且跟据实际情况订制不同的功能.
相关文章推荐
- 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(19)-权限管理系统-用户登录
- 实现记录和查看用户的系统登录和退出历史
- Java设置session超时(失效)的时间 在一般系统登录后,都会设置一个当前session失效的时间,以确保在用户长时间不与服务器交互,自动退出登录,销毁session 具体设置的方法有三种:
- 如何实现登录互踢 即如何实现当用户登录之后 如果在其他地方再次登录 则这边的用户自动退出系统
- 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(19)-权限管理系统-用户登录
- 实现记录和查看用户的系统登录和退出历史和利用C#编写的网络聊天程序
- 11.15 用户如何登录到系统,如何退出系统?
- 网站用户单点登录系统解决方案
- 网站用户单点登录系统解决方案--令牌式
- 地磅称量系统之(27~29)实现主界面显示用户的登录信息和日期时间星期的代码
- 在linux系统强制登录用户推出系统
- Linux系统下设置用户登录环境
- 网站用户单点登录系统解决方案
- Linux 系统的单用户模式、修复模式、跨控制台登录在系统修复中的运用
- 网站用户单点登录系统解决方案-跨域通行证
- 网站用户单点登录系统解决方案
- Linux 系统的单用户模式、修复模式、跨控制台登录在系统修复中的运用
- XP系统中多用户,自动登录(二)
- 网站用户单点登录系统解决方案
- 网站用户单点登录系统解决方案