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='width: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='width:100%;height:100%' />");
});
//改变一下窗口背景
$("#_DialogBGMask").css("z-index", "-1").css("opacity", "1").empty().append("<img src='/system/images/screen/000.jpg' style='width: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="width:70px">站点：</td>
<td><input type="text" name="sitename" id="sitename" style="width: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="width: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="width:140px;" class="validate[required,custom[noSpecialCaracters]] float_left"/>
<span class="star float_left">*</span><div class="validation_info">请输入密码</div>
<input type="text" style="width: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>
超时后点击链接时弹出的登陆页窗口效果
成功登录以后会关闭窗口层，显示最后操作的界面。
