问题
用户进入页面 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 (Windows.sessionStorage) {
- var method = JSON.stringify({
- name: '要执行的方法的名称',
args: [参数 1, 参数 2]
- });
- Windows.sessionStorage.setItem('pending.method', method);
- }
从登录界面跳转回页面, 取出要执行的操作并执行:
- if (Windows.sessionStorage) {
- var pendingMethod;
- if (pendingMethod = Windows.sessionStorage.getItem('pending.method')) {
- Windows.sessionStorage.removeItem('pending.method');
- pendingMethod = JSON.parse(pendingMethod);
- Windows[pendingMethod.name].apply($scope, pendingMethod.args || []);
- }
- }
总结, 采用的方式是通过 HTTP_REFERER 和 cookie 记录登录后要跳转的页面, 通过 sessionStorage 记录返回页面后要执行的 JavaScript 方法和参数.
来源: http://www.bubuko.com/infodetail-3479640.html