问题
用户进入页面A,在页面A上要执行一个操作X。操作X需要用户登录后才能访问,因此系统引导用户到登录页,用户登录后在让用户继续执行操作X。
分析
操作X存在两种情况,1:跳转到一个页面B;2:执行一个操作。
进入页面B的情况,要在页面B的入口位置判断是否用户是否为登录状态,是则进入,否则进入登录页面,登录成功后再进入页面B。假设页面A的URL是是url-a,页面B的url是url-b,登录页面的url是url-l,那么浏览器的地址依次是url-a,url-b,url-l,url-b。因此,系统就是要解决登录模版如何记录url-b,并在成功后进入url-b。
执行一个操作的情况。执行操作前判断用户的登录状态,是则执行操作,否则先跳转到登录页面,登录成功后返回页面A,页面A继续执行之前的操作。这时,登录页要记录页面A,登录成功后返回A,页面A要记录用户的操作和参数,从登录页返回后继续执行。
实现
页面跳转
页面跳转的情况,由页面B负责判断是否要跳转到登录页,如果需要用redirect的方式完成。
header("Location: $loginURL");
exit;
在login页面需要知道是从哪个页面跳转来,并保存,这样登录成功后再跳转回原来的页面。PHP中可以通过$_SERVER[‘HTTP_REFERER’]获得是从哪个页面进入的的登录页。
$referer = $_SERVER['HTTP_REFERER'];
进入登录页时获得的$referer必须要记录下来,才能在登录成功后跳转回之前的页面。跨调用保存信息有4种方式:1、保存在session中;2、保存在cookie中;3、作为参数放在url中;4、生成页面时,作为页面的隐藏信息。
放在session中,只能通过php获取,因此,登录成功后跳转回原页面的操作只能在php中进行,这样就不能实现通过一个ajax调用验证用户登录信息后,在前端页面直接跳转指定页面。
采用cookie的方式需要前后端共同确定一个约定,用什么代表页面的跳转信息,另外前端需要增加cookie的处理逻辑。这种方式可以同时支持前端或后端进行跳转。
作为参数放在url中可以实现在前端进行跳转,但是会导致url看起来有些怪异,同时还需要考虑url编码的问题。
直接生成在登录页面中(利用页面模版)作为前端参数,这种方式支持在前端进行跳转,需要前后端约定参数的定义。
执行操作
执行操作的情况应该是页面A判断用户是否已经登录,或者根据执行操作X的返回结果,由页面A直接跳转到登录页面,登录界面记录是从哪个页面跳转来的。
header("Location: $loginURL");
exit;
页面A执行跳转到登录页面前,首先记录要执行的操作,例如:操作的名称,这个信息必须可以跨请求访问。操作的相关信息可以通过url、session、cookie传递,或者通过localStorage、sessionStorage保留在客户端。
如果用url指定要执行的操作(用history.pushState替换url),只能携带简单的参数(放在history中是个好方法?没想明白),通用性不好。session和cookie需要向服务器端传数据,而且获取保留的参数并不方便。最后决定选择sessionStorage保存要执行的方法。
跳转到登录界面前保存要执行的操作:
if (window.sessionStorage) {
var method = JSON.stringify({
name: '要执行的方法的名称',
args: [参数1,参数2]
});
window.sessionStorage.setItem('pending.method', method);
}
从登录界面跳转回页面,取出要执行的操作并执行:
if (window.sessionStorage) {
var pendingMethod;
if (pendingMethod = window.sessionStorage.getItem('pending.method')) {
window.sessionStorage.removeItem('pending.method');
pendingMethod = JSON.parse(pendingMethod);
window[pendingMethod.name].apply($scope, pendingMethod.args || []);
}
}
总结,采用的方式是通过HTTP_REFERER和cookie记录登录后要跳转的页面,通过sessionStorage记录返回页面后要执行的javascript方法和参数。