登录对话框定制

用户在 SuccApp 页面中操作时，如果会话失效或当前操作需要重新登录，前端会弹出登录对话框。默认策略是把系统登录页以 iframe 方式嵌入对话框，用户完成登录后，页面继续执行之前的操作。

需要适配项目样式、单点登录流程或自定义未登录处理逻辑时，可以通过全局样式和全局前端脚本定制登录对话框。

修改登录对话框样式

在全局样式脚本中重载登录对话框样式。默认对话框的主要 DOM 结构如下：

<div class="logindialog-base">
    <div class="logindialog-content">
        <span class="logindialog-close"></span>
        <iframe class="logindialog-page" src="/login?:inLoginIFrame=true"></iframe>
    </div>
</div>

类名	说明
.logindialog-base	登录对话框的最外层容器，包含遮罩层。
.logindialog-content	对话框内容容器，内部包含 iframe 和关闭按钮。
.logindialog-page	展示登录页的 iframe。
.logindialog-close	对话框右上角的关闭按钮。

完整重载登录对话框

如果只改样式不够，可以在全局前端脚本中通过 window.SZ.events.onError 接管需要登录或无权限时的处理逻辑。

window.SZ.events = {
    onError: function(e: Error) {
        if (e.httpStatus === 401) {
            // 自定义未登录处理逻辑
        }
    }
}

返回值会影响后续处理：

返回值	后续行为
true 或 undefined	继续执行系统默认逻辑，弹出登录对话框。
false	表示脚本已经处理该异常，系统不再弹出默认登录对话框。
其他返回值	表示脚本已完成登录，系统继续执行用户之前的业务操作。

如果在自定义逻辑中仍需要唤起系统默认登录对话框，可以调用 sys.handler401：

import("sys/sys").then(sys => {
    sys.handler401({
        onsuccess: () => {
            // 登录成功后的处理
        },
        oncancel: () => {
            // 用户关闭对话框后的处理
        }
    });
});

默认登录对话框

默认登录对话框会根据浏览器宽度自适应显示。窄屏下对话框会铺满页面，宽屏下对话框会随页面宽度放大。自定义登录页需要保持响应式布局，避免在 iframe 中出现横向滚动或内容裁切。

单点登录支持

默认登录对话框支持系统单点登录流程。会话失效后，iframe 中会展示系统登录页；如果系统配置了默认单点登录，登录页会继续跳转到第三方登录或授权页面。第三方页面能否在 iframe 中正常展示，还取决于第三方系统的跨域和嵌入策略，相关背景见将第三方系统页面嵌入到 SuccApp。

直接关闭对话框

用户关闭登录对话框后，系统会按默认错误处理展示无权限提示：