QUI操作超时弹出登录窗口登录的处理方式

在使用QUI开发的业务系统中，如果长时间没操作，session过期后，再次操作系统超时会自动跳转到登陆页面，如果当前有一些操作没有保存，需要重新登录后再次填写信息，用户体验很不好！

为了避免超时后页面跳转到登录页面，我改善了一下：当超时后点击链接时弹出登录页面，用户在弹出的登陆页面登录后，他先前的一些操作不会丢失，可以继续操作。

注：2014-04-26做了一下改进，弹出的超时登录窗口用户名自动填上，不允许修改，这样在一定程度上防止其它用户进入看到自己操作。

下面是具体实现方式：

权限验证基类页

    public class AuthBasePage : BasePage
    {
        protected override void OnInit(EventArgs e)
        {
            //判断是否得到身份认证
            //您也可以用session判断
            if (null!=HttpContext.Current.User.Identity&&!HttpContext.Current.User.Identity.IsAuthenticated)
            {
                Response.Write("<script type="text/javascript">");
                Response.Write("var topWin = (function (p, c) {while (p != c) {c = p;p = p.parent}return c;})(window.parent, window);");
                Response.Write("try{ topWin.openLoginWindow();}catch(e){window.location='/Login.aspx'}");
                Response.Write("</script>");
                Response.End();
            }
            HttpCookie authCookie = Context.Request.Cookies[FormsAuthentication.FormsCookieName];
            FormsAuthenticationTicket authTicket = FormsAuthentication.Decrypt(authCookie.Value);
            userData = authTicket.UserData;
            JavaScriptSerializer javaScriptSerializer = new JavaScriptSerializer();
　　　　　　　//此处使用了吉日嘎拉权限管理系统的单点登录
            userInfo = javaScriptSerializer.Deserialize<BaseUserInfo>(userData);
            userInfo.ServiceUserName = BaseSystemInfo.ServiceUserName;
            userInfo.ServicePassword = BaseSystemInfo.ServicePassword;
            base.OnInit(e);
        }

 在QUI主框架页面，增加下面的JS代码

      //避免超时跳转到登录页面，使用户的操作丢失，造成不好的体验
      function openLoginWindow() {
          var diag = new top.Dialog();
          diag.Title = "系统超时，您已经退出，请重新登录";
          //窗口ID
          diag.ID = "a1";
          diag.URL = "/PageUtils/DialogLogin.aspx?companyName=<%=userInfo.CompanyName%>&userName=<%=userInfo.UserName%>";
          diag.Width = 350;
          diag.Height = 190;
          diag.ShowCloseButton = false;
          diag.ShowCancelButton = false;
          diag.ShowOkButton = false;
          diag.ButtonAlign = "center";
          diag.AllowChangeIndex = false;
          diag.show();
          diag.addButton("btnRest", " 重 置 ", function () {
              top.document.getElementById("_DialogFrame_a1").contentWindow.restForm();
              //改变一下窗口背景
              $("#_DialogBGMask").css("z-index", "-1").css("opacity", "1").empty().append("<img src='/system/images/screen/000.jpg' style='100%;height:100%' />");
          });
          diag.addButton("btnLogin", " 登 录 ", function () {
              top.document.getElementById("_DialogFrame_a1").contentWindow.validateForm();
              //改变一下窗口背景
              $("#_DialogBGMask").css("z-index", "-1").css("opacity", "1").empty().append("<img src='/system/images/screen/000.jpg' style='100%;height:100%' />");
          });
          //改变一下窗口背景
          $("#_DialogBGMask").css("z-index", "-1").css("opacity", "1").empty().append("<img src='/system/images/screen/000.jpg' style='100%;height:100%' />");

      }

 可以看到，在session超时后，打开新页面时会调用主框架的openLoginWindow()方法，弹出登录窗口层，这样就不会跳转到登录页面了，当然如果您刷新了主框架则会跳转到登陆页的。

 弹出窗口DialogLogin.aspx 后台页面的关键代码

  public partial class DialogLogin : BasePage
    {
        protected string sitename = RequestString("sitename");
        protected string username = RequestString("username");
        protected string password = RequestString("password");
        protected string act = RequestString("act");
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!string.IsNullOrWhiteSpace("act") && string.Equals("login", act, StringComparison.OrdinalIgnoreCase))
            {
                LoginResult loginResult = new LoginResult();
                JavaScriptSerializer javaScriptSerializer = new JavaScriptSerializer();
                BaseUserInfo userInfo = null;
                var userManager = new BaseUserManager(this.userInfo);
                if (!string.IsNullOrWhiteSpace(sitename) && !string.IsNullOrWhiteSpace(username) && !string.IsNullOrWhiteSpace(password))
                {

　　　　　　　　　　　　//此处可以用您自己的登录方法。 我这里是使用了吉日嘎拉单点登录。
                    PermissionServiceSoapClient webPermission = new PermissionServiceSoapClient();
                    string jsonData = webPermission.LogOnByCompany(sitename, username, password);
                    dynamic json = JsonConvert.DeserializeObject(jsonData);
                    string statusCode = string.Empty;
                    string statusMessage = string.Empty;
                    string userData = string.Empty;
                    statusCode = (string)((dynamic)json)["StatusCode"];
                    statusMessage = (string)((dynamic)json)["StatusMessage"];
                    if (string.Equals("OK", statusCode, StringComparison.OrdinalIgnoreCase))
                    {
                        userData = json["UserInfo"].ToString();
                        userInfo = javaScriptSerializer.Deserialize<BaseUserInfo>(userData);
                        FormsAuthentication.SetAuthCookie(userInfo.UserName, true, FormsAuthentication.FormsCookiePath);
                        FormsAuthenticationTicket authTicket = new FormsAuthenticationTicket(1, userInfo.UserName, DateTime.Now, DateTime.Now.AddMinutes(20), false, userData);
                        FormsIdentity identity = new FormsIdentity(authTicket);
                        ManageCookies.AddCookie(FormsAuthentication.FormsCookieName, FormsAuthentication.Encrypt(authTicket));
                    }
                    loginResult.Status = statusCode;
                    loginResult.Message = statusMessage;
                }
                else
                {
                    loginResult.Status = "Fail";
                    loginResult.Message = "没有参数传入";
                }
                string result = javaScriptSerializer.Serialize(loginResult);
                Response.Write(result);
                Response.End();

            }
            //else
            //{
            //    loginResult.Status = "Fail";
            //    loginResult.Message = "参数不明确";
            //}
        }

        /// <summary>
        /// 登录结果
        /// </summary>
        class LoginResult
        {
            public string Status
            {
                set;
                get;
            }
            public string Message
            {
                set;
                get;
            }

        }
    }

　　

弹出窗口DialogLogin.aspx 前台页面的关键代码

<div id="screenLock" class="timeOut">
<form id="form1" action="" showOnMouseOver="false">
<table width="100%">
    <tr>
	<td  class="ali03" style="70px">站点：</td>
    <td><input type="text" name="sitename" id="sitename" style="140px;" class="validate[required,length[0,20]] float_left" />
        <span class="star float_left">*</span><div class="validation_info">请输入站点名称</div>
    </td>
    </tr>
    <tr>
	<td  class="ali03">用户：</td>
    <td><input type="text" name="username" id="username" style="140px;"  class="validate[required,length[0,20]] float_left" />
         <span class="star float_left">*</span><div class="validation_info">请输入用户名称</div>
    </td>
    </tr>
	<tr>
	<td  class="ali03">密码：</td>
	<td><input type="password" name="password" id="password" style="140px;"  class="validate[required,custom[noSpecialCaracters]] float_left"/>
         <span class="star float_left">*</span><div class="validation_info">请输入密码</div>
	<input type="text" style="2px;display:none;"/>
	</td>
	</tr>
	<tr>
	<td ></td>
	<td><span id="passInfo" class="red"></span></td>
	</tr>
</table>
</form>
</div>
<script type="text/javascript">
    //手动触发验证，被验证的表单元素是containerId容器里的。 可以验证整个表单，也可以验证部分表单。
    function validateForm() {
        var valid = $("#form1").validationEngine({ returnIsValid: true });
        if (valid == true) {
            loginDeal();
        } else {
            top.Dialog.alert('填写不正确，请按要求填写！');
        }
    }
    //重置表单
    function restForm() {
        //$("#sitename").val("");
        //$("#username").val("");
        $("#password").val("");
        //$('#myform')[0].reset();
    }
    //登录操作
    function loginDeal() {
        $.ajax({
            type: "GET",
            async: false,
            url: "/PageUtils/DialogLogin.aspx",
            data: {
                "sitename": $("#sitename").val(),
                "username": $("#username").val(),
                "password": $("#password").val(),
                "act": "login"
            },
            dataType: "json",
            success: function (result) {
                if (result) {
                    if (result.Status == "OK") {
                        //登录成功 关闭弹出窗口层
                        top.Dialog.close();
                    } else {
                        top.Dialog.alert("账号或密码错误" + result.Message);
                    }
                } else {
                    top.Dialog.alert("出现系统错误");
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                top.Dialog.alert("出现系统错误");
            }
        });
    }

    //手动触发验证
    $(function () {
        $("#sitename").val("<%=Request["companyName"]%>").attr("disabled", true);
        $("#username").val("<%=Request["userName"]%>").attr("disabled", true);
        $("#password").keydown(function (event) {
            if (event.keyCode == 13) {
                validateForm('#form1');
            }
        })
    })


</script>

 

　　

超时后点击链接时弹出的登陆页窗口效果

成功登录以后会关闭窗口层，显示最后操作的界面。