---
navTitle: 登录对话框定制
---
# 登录对话框定制

<!--
维护说明：本页说明的是运行态登录对话框前端扩展点，主要依赖全局样式和 window.SZ.events.onError。
如果 security/login 或 sys.handler401 的接口变化，需要同步核对本页代码示例。
-->

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

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

## 修改登录对话框样式{#css}

在[全局样式脚本](../styles/custom-less.md)中重载登录对话框样式。默认对话框的主要 DOM 结构如下：

```html
<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` | 对话框右上角的关闭按钮。 |

## 完整重载登录对话框{#override}

如果只改样式不够，可以在[全局前端脚本](../frontend/custom-ts.md)中通过 `window.SZ.events.onError` 接管需要登录或无权限时的处理逻辑。

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

返回值会影响后续处理：

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

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

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

## 默认登录对话框{#default}

![默认登录对话框](./images/default-logindialog.png)

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

## 单点登录支持{#sso}

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

## 直接关闭对话框{#close}

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

![没有权限提示](./images/not-login.png)