JS+PHP实现登录后自动执行之前的操作
问题
用户进入页面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方法和参数。
正文到此结束
热门推荐
相关文章
Loading...
![[HBLOG]公众号](http://www.liuhaihua.cn/img/qrcode_gzh.jpg)
