Question

我正在尝试创建一个单页应用，其中强制登录通过位于页面上的模式 - 我已创建（在SO上找到）一个自定义authrorize属性，该属性告诉视图是否显示PartialView

CustomAuthorizeAttribute

 [AttributeUsage(AttributeTargets.Method | AttributeTargets.Class, Inherited = true, AllowMultiple = true)]
public class PopupAuthorizeAttribute : AuthorizeAttribute
{
    private void CacheValidateHandler(HttpContext context, object data, ref HttpValidationStatus validationStatus)
    {
        validationStatus = this.OnCacheAuthorization(new HttpContextWrapper(context));
    }

    public override void OnAuthorization(AuthorizationContext filterContext)
    {
        bool isAuthorized = false;
        if (filterContext == null)
        {
            throw new ArgumentNullException("filterContext");
        }
        if (this.AuthorizeCore(filterContext.HttpContext))
        {
            HttpCachePolicyBase cache = filterContext.HttpContext.Response.Cache;
            cache.SetProxyMaxAge(new TimeSpan(0L));
            cache.AddValidationCallback(new HttpCacheValidateHandler(this.CacheValidateHandler), null);
            isAuthorized = true;
        }

        filterContext.Controller.ViewData["OpenAuthorizationPopup"] = !isAuthorized;
    }
}

然后

 @if ((bool)(ViewData["OpenAuthorizationPopup"] ?? true))
    {
        Html.RenderPartial("~/Views/Shared/_Login.cshtml");
    }

部分视图如下：

@model Timeregistration.Models.Login

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>Login</title>
    </head>
    <body>
        <div class="modal fade" data-backdrop="static" data-keyboard="false" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModal-label" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    @using (Html.BeginForm("Login", "Account", FormMethod.Post, new { role = "form" }))
                    {
                        @Html.AntiForgeryToken()

                        <div class="modal-header">
                            <h3 class="panel-title">
                                <i class="glyphicon glyphicon-lock"></i>
                                Sign In
                            </h3>
                        </div>
                        <div class="modal-body">
                            <div>
                                @Html.LabelFor(m => m.UserName)
                            </div>
                            <div class="input-group">
                                <span class="input-group-addon">
                                    <i class="glyphicon glyphicon-user"></i>
                                </span>
                                @Html.TextBoxFor(m => m.UserName, new { @class = "form-control" })
                            </div>
                            @Html.ValidationMessageFor(m => m.UserName)
                            <div>
                                @Html.LabelFor(m => m.Password)
                            </div>
                            <div class="input-group">
                                <span class="input-group-addon">
                                    <i class="glyphicon glyphicon-asterisk"></i>
                                </span>
                                @Html.PasswordFor(m => m.Password, new { @class = "form-control" })
                            </div>
                            @Html.ValidationMessageFor(m => m.Password)
                            <div class="input-group">
                                @Html.CheckBoxFor(m => m.RememberMe)
                                @Html.LabelFor(m => m.RememberMe)
                            </div>
                        </div>
                        <div class="modal-footer">
                            <div class="pull-right">
                                <input type="submit" value="Log in" style="width: 60px;" class="btn btn-primary" />
                            </div>
                        </div>
                    }
                </div>
            </div>
        </div>
    </body>
</html>

<script type="text/javascript">
    $(window).load(function(){
        $('#myModal').modal('show');
    });
</script>

问题出现了：

使用data-backdrop="static" data-keyboard="false"强制bootstrap模式在模态或esc之外单击时不关闭。但这有一个小小的安全问题。任何用户都可以添加关闭按钮到模态 - 运行时（通过任何浏览器），然后关闭模态。

在用户进行身份验证之前，是否有更好的方法可以强制模式位于页面顶部？

强制引导模式（登录部分视图） - 直到授权

0 个答案: