介绍

介绍

福哥今天要继续制作TFUMS系统的用户登录状态的功能，上一课我们已经完成了用户登录状态的接口的开发，今天我们的目的就是要在页面上根据这个用户登录状态显示不同的界面内容，让用户可以了解到自己当前是否已经登录了。

用户登录状态有两种使用场景，第一种就是在后台进行判断的，这种场景属于在后端发现用户没有登录就会直接拦截并采取措施（例如：跳转到首页）；第二种就是在前台进行判断的，这种场景属于公开授权的页面的情况，我们通过JS程序动态将用户登录状态“告知”用户就可以了。

TFUMS主JS

我们建立js/tfums.js程序文件，这个程序作为系统基本的JS程序文件，所有公共使用的JS对象、函数、JQ控件都放这个程序文件里面。

JQ控件tfums

(function ($) {
    var myTFUMS = {
        obj : null,
        opts : null,

        start : function(){
            $('#login-status').loginStatus({
                baseUri : this.opts.baseUri
            });
        },

        init : function(obj, opts){
            if(!opts instanceof Object){
                opts = null;
            }
            this.obj = obj;
            this.opts = opts;
        }
    }
    myTFUMS.init.prototype = myTFUMS;

    $.fn.tfums = function (options) {
        var my = new myTFUMS.init(this, options);
        my.start();
    };
})(jQuery);

JQ控件loginStatus

(function ($) {
    var myLoginStatus = {
        obj : null,
        opts : null,

        start : function(){
            var ex=this;

            $.get(this.opts.baseUri + 'api/member/status',function(d){
                if(d.userID){
                    ex.obj.html("");
                    ex.obj.append("<li class=\"nav-item\"><a href=\""+ ex.opts.baseUri +"member/profile.htm\" class=\"nav-link\">"+ d.userName +"</a></li>" +
                        "<li class=\"nav-item\"><a href=\""+ ex.opts.baseUri +"api/member/logout\" class=\"nav-link\">注销</a></li>");
                }
            },'json');
        },

        init : function(obj, opts){
            if(!opts instanceof Object){
                opts = null;
            }
            this.obj = $(obj);
            this.opts = opts;
        }
    }
    myLoginStatus.init.prototype = myLoginStatus;

    $.fn.loginStatus = function (options) {
        var my = new myLoginStatus.init(this, options);
        my.start();
    }
})(jQuery);

页尾加载tfums

$(document.body).tfums({
    baseUri : "<% $TFReq->server->BASE_URI %>"
});

控制器

logout

class APIController extends SystemAPIController{
    public function user_process(){
        $cookie = $this->tfphp->getRequest()->cookie;
        $user = new user($this->tfphp);
        $id = $cookie->get("tfums_id");
        $token = $cookie->get("tfums_token");

        try{
            $user->clearToken($token);
        }
        catch(\TypeError $e){ }

        $this->tfphp->getResponse()->location($this->tfphp->getRequest()->server->BASE_URI);
    }
}

讲解

JQ控件tfums

可以看出来，这个tfums控件什么都没做，只是在start方法里面调用了loginStatus控件而已。

JQ控件loginStatus

这个控件只是做了一件事情，就是通过JQ发起一个AJAX请求，请求上一课我们开发的api/member/status控制器，获取当前用户登录状态信息。

页尾加载tfums

福哥在视图模板的页尾footer.htm里面的最下面增加了tfums控件的调用，通过tfums控件可以调用所有公共操作的JS程序。

控制器

logout

注销控制器存放在WEB-INF/Controller/api/member/logout.inc.php里面。

这个控制器只做了一件事就是清除token，当然清除之后还需要转到一个不需要登录就可以访问的页面上（比如：首页）。

总结

今天福哥带着童鞋们完成了用户登录状态的另一种展示方式，使用AJAX方式可以在那些公共授权的页面上通过JS程序向用户展示登录状态。

结合上一课，我们就掌握了两种展示用户登录状态的方法，即：后端展示（中间层），前端展示（AJAX），有了这个技术之后我们就可以开始做登录之后的功能了。