Question

我有一个登录视图，它位于自己的shell中。此外，如果任何http请求返回HttpClient状态，我已将login调整为自动重定向到unauthorized shell。

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

这是一些概念性代码：

// ... 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; } }}); }; // ... }

MyHttpClient

解决方案：

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

HttpUnauthorized触发/发布新的MyHttpClient事件，其中包含所需信息（说明文字等）
login.js不再更改shell，因为401的具体处理不应该是他关注的问题
HttpUnauthorized订阅<div id="test-div"></div>事件，更改了shell＆amp;显示了解释文本......

我仍然对这个解决方案的任何建议/改进想法持开放态度，因为我不太确定这是否是最佳方式......

Answer 1

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

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

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

然后在登录viewmodel内的附加方法中，检查值并清除它，如下所示：

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

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

${error}

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

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

1 个答案: