首页 > 代码库 > 构建前端用户系统之登录退出

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

2024-07-17 17:52:01   217人阅读

 

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

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

(function($){var user = window.user = {};// 用户数据user.data = http://www.mamicode.com/{};"后端url", function(res){if(res.error === 0){//返回值同后端协定user.status = 1;user.data.userName = res.data.userName;//模拟用户名} else {user.status = 0;user.data = http://www.mamicode.com/{};"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="http://www.mamicode.com/#">退出</a>‘;} else {html = ‘请先登录<a href="http://www.mamicode.com/#">登录</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 = http://www.mamicode.com/{};>

　　

经过以上代码后前端的登录退出就基本完成了, 但由于每次都要请求后端, 而这个请求是异步的, 如果返回响应时间过长, 那么在这个时间段使用 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>

　　

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

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


联系
我们