上节课我们一起学习了登录,登录的时候我们把token写到了cookie当中,登录成功后,我们查看Cookie信息,如下图所示,发现是有token信息的。
我们回到登录页面,可以看到token信息。如下图所示。可以看到与淘淘商城首页的token信息是完全一致的。
不同的端口就已经属于跨域了,而我们就是要解决跨域问题。
首先我们修改下淘淘商城首页的登录和注册链接地址,因为目前这两个链接地址都不正确。
我们从淘淘商城首页的index.jsp页面代码说起,如下图所示。可以看到,商城首页的信息都在header.jsp页面当中。
我们找到header.jsp页面,发现,登录和注册在shortcut.jsp页面当中,如下图所示。
在shortcut.jsp页面当中,我们可以看到登录和注册信息,它们都是一个超链接,点击它们的时候会去触发js方法,如下图所示。
但我们惊奇的发现,在shortcut.jsp页面当中根本就没有js代码,那么js在哪儿呢?由于shortcut.jsp是header.jsp页面的一部分,而header.jsp是index.jsp的一部分,因此我们按照由低到高的顺序来找,在header.jsp页面当中,我们可以看到引用了base-v1.js的脚本文件,如下图所示。
那么我们便来看下这个脚本文件,我们到js目录下找到该脚本文件,打开它,如下图所示,可以看到当前login和regist方法的链接地址确实是不正确的。
修改下链接地址,如下:
function login() {
return location.href = "http://localhost:8088/page/login";
}
function regist() {
return location.href = "http://localhost:8088/page/register";
}
修改完这段js代码之后,我们来刷新淘淘商城首页(不用重启工程),然后点击登录和注册按钮,发现都可以正常跳转到相应的页面(这里就不贴图了)。
那么,我们要在淘淘商城首页拿到登录用户的信息的话,需要先拿到token,然后根据token调用单点登录系统的接口来获取用户信息。那么,这在淘淘商城的代码是怎样的呢?我们先找到footer.jsp(这是淘淘商城页脚的页面,所有页面都会引入这个页脚),在footer.jsp当中可以看到引入了taotao.js脚本文件,如下图所示。
我们打开taotao.js脚本文件,如下图所示,可以看到,这个文件当中是处理获取用户登录信息的,可以看到,token是可以从cookie中直接获取到的,如果能获取到token,那么就拿token去调用单点登录系统的相应接口,只是ajax请求地址不正确,我们需要修改一下。
还有,我们现在还不熟悉jsonp,因此我们暂且先把dataType : "jsonp"注释掉,修改后的checkLogin方法如下:
checkLogin : function(){
var _ticket = $.cookie("TT_TOKEN");
if(!_ticket){
return ;
}
$.ajax({
url : "http://localhost:8088/user/token/" + _ticket,
//dataType : "jsonp",
type : "GET",
success : function(data){
if(data.status == 200){
var username = data.data.username;
var html = username + ",欢迎来到淘淘!<a href=\"http://www.taotao.com/user/logout.html\" class=\"link-logout\">[退出]</a>";
$("#loginbar").html(html);
}
}
});
}
那么现在能不能正常取到用户信息呢?我们来试一下,我们到淘淘商城首页,刷新首页,首先看一下当前有没有token信息,如下图所示,发现是有token信息的。这里啰嗦一句的是,能够看到cookie并不代表该cookie一定能用,因为有可能该cookie中的token信息在缓存redis当中已经过期了,不过过期了也没关系,拿着过期的token去获取用户信息返回的TaotaoResult中状态码是400,而不是200,而上面的代码判断只有状态码是200才将登录和注册换成用户名和退出的。
接着我们查看Console一栏,发现报错了,报的错误当中包含"Access-Control-Allow-Origin",这就说明跨域了!为什么会跨域呢?这是因为我们在taotao-portal-web工程访问taotao-sso-web工程,这两个工程的端口号是不一样的,一个是8082,另一个是8088,这就涉及到了跨域,而js从设计之初就不支持跨域的。
既然有了跨域问题,我们总得解决,目前大多数解决跨域的问题都是使用的jsonp方式,jsonp是利用了js的一个特点(或者你可以说是一个漏洞)来实现跨域。
我们先看下访问请求是否正确,同时也看下token是否过期,我们点击错误当中的 http://localhost:8088/user/token/d4205893-c717-4d97-aa90-ba23589fd76e这个链接,看到下面的结果说明该token还未过期。
本小节就到这儿,关于jsonp我们下节继续介绍。