如何在OAuth认证完成后再加载图片？（老MVC应用场景）

后端方案：控制器拦截+视图安全渲染 #

1. 全局认证拦截过滤器 #

自定义MVC Action过滤器，确保所有涉及受保护资源的页面，必须在认证完成后才会渲染：

public class RequireAuthBeforeRenderAttribute : ActionFilterAttribute
{
    public override void OnActionExecuting(ActionExecutingContext filterContext)
    {
        // 校验AD OAuth认证状态
        if (!filterContext.HttpContext.User.Identity.IsAuthenticated)
        {
            // 重定向到认证页面，携带当前页面的返回地址
            filterContext.Result = new RedirectResult(
                "/Account/Login?ReturnUrl=" + 
                HttpUtility.UrlEncode(filterContext.HttpContext.Request.Url.PathAndQuery)
            );
        }
        base.OnActionExecuting(filterContext);
    }
}

使用方式二选一：

• 全局注册（在Global.asax的Application_Start方法中）：

  GlobalFilters.Filters.Add(new RequireAuthBeforeRenderAttribute());
  

• 单个控制器/Action单独标记：

  [RequireAuthBeforeRender]
  public class HomeController : Controller
  {
      public ActionResult Index()
      {
          // 仅认证通过后才会执行此处逻辑，视图可安全渲染图片路径
          return View();
      }
  }
  

2. 控制器代理返回图片（强制认证校验） #

将静态图片的访问改为通过控制器Action代理，确保只有认证用户能获取图片资源：

[RequireAuthBeforeRender]
public ActionResult GetProtectedImage(string imageName)
{
    var imagePath = Server.MapPath($"~/ProtectedAssets/{imageName}");
    if (!System.IO.File.Exists(imagePath))
    {
        return HttpNotFound();
    }
    // 返回图片流，支持jpg/png等格式
    var contentType = imageName.EndsWith(".png") ? "image/png" : "image/jpeg";
    return File(imagePath, contentType);
}

视图中调用该Action：

<img src="@Url.Action("GetProtectedImage", "Home", new { imageName = "company-logo.jpg" })" alt="公司Logo" />

前端方案：认证完成后动态加载图片 #

如果后端改动成本过高，可采用前端延迟加载方案：

1. 页面初始渲染占位符 #

<img id="protected-img" src="/images/loading-placeholder.png" alt="加载中" data-real-src="@Url.Content("~/ProtectedAssets/company-logo.jpg")" />

2. 监听认证状态并加载图片 #

// 从后端渲染的全局变量获取认证状态（在_Layout.cshtml中添加：<script>window.isAuth = @User.Identity.IsAuthenticated.ToString().ToLower();</script>）
function checkAuthStatus() {
    return window.isAuth === true;
}

function loadRealImage() {
    const imgEl = document.getElementById('protected-img');
    const realSrc = imgEl.getAttribute('data-real-src');
    imgEl.src = realSrc;
    imgEl.alt = "公司Logo";
}

// 页面加载后检查认证状态，未认证则轮询等待
window.addEventListener('load', () => {
    if (checkAuthStatus()) {
        loadRealImage();
    } else {
        const authCheckTimer = setInterval(() => {
            if (checkAuthStatus()) {
                loadRealImage();
                clearInterval(authCheckTimer);
            }
        }, 500);
    }
});

内容的提问来源于stack exchange，提问作者Kimber Warden