将数据传递给视图模型的最佳实践

Question

我有一个登录视图，它存在于它自己的外壳中。如果任何 http 请求返回 unauthorized 状态，我还调整了 HttpClient 以自动重定向到 login shell。

此外，在用户“强制”注销后，我想在登录页面上向用户显示一些文本信息。如何将信息（下面代码中的logoutReason）从MyHttpClient 传递到login shell/view 模型？

这是一些概念性代码：

login.js

// ...
export class Login {
    username = '';
    password = '';
    error = '';

    // ...

    login() {
        // ... login code ...
        this.aurelia.setRoot('app'); // Switch to main app shell after login succeeded...
    }

    // ...
}

MyHttpClient.js

// ...
export default class {
    // ...

    configure() {
        this.httpClient.configure(httpConfig => {
            httpConfig.withInterceptor({
                response(res) {
                    if (401 === res.status) {
                        this.aurelia.setRoot('login');
                        let logoutReason = res.serversLogoutReason;
                        // How should i pass the logoutReason to the login shell/view model?
                    }
                    return res;
                }
        }});
    };

    // ...
}

---

解决方案：

我选择采用bluevoodoo1's comment 中建议的“事件”路径并进行一些调整：

• MyHttpClient 触发/发布一个新的 HttpUnauthorized 事件，其中包含所需的信息（描述文本等）
• MyHttpClient 不再更改外壳，因为 401 的具体处理不应该是他关心的问题
• login.js 订阅 HttpUnauthorized 事件，更改外壳并显示说明文本...

我仍然愿意接受对此解决方案的任何建议/改进想法，因为我不太确定这是否是最好的方法......

Answer 1

您可以设置localStorage 或sessionStorage 值，然后在显示后将其清除。您所要求的内容称为 Flash 消息，它会在其中显示然后过期。

在您的响应拦截器中添加如下内容：

sessionStorage.setItem('message-logoutReason', 'Session expired, please login again');

然后在登录视图模型内的附加方法中，检查该值并将其清除，如下所示：

attached() {
    this.error = sessionStorage.getItem('message-logoutReason');
    sessionStorage.removeItem('message-logoutReason');
}

然后在你的视图中你可以显示它：

${error}

正如 Bluevoodoo1 所指出的，您也可以使用事件，但我个人尽量避免使用事件，当出现问题时更难测试和调试。