Blazor 在 X 量空闲时间后执行某些操作答案

【问题标题】：Blazor do something after X-amount idle timeBlazor 在 X 量空闲时间后执行某些操作
【发布时间】：2022-03-28 18:37:00
【问题描述】：

我对 blazor 和 core 还很陌生。

我的问题是我有一个以 API 为中心的应用程序，它将对 api 进行登录调用并获取 JWT 令牌。我需要找到一种方法在一段时间的空闲时间后注销用户并清除我正在保存的 JWT 令牌。

我在某处读到他们从未在 Blazor 中添加检测空闲时间的方法，但我很好奇是否有人对此有解决方案。

【问题讨论】：

这是什么风格的 Blazor？
当前使用服务器风格而不是 Web 程序集，我让它有点用于身份验证，所以如果令牌不再有效，但我可以看到没有地方可以检查这个所以它总是会加载如果页面无效，则页面然后轻弹回登录页面。至于空闲计时器一直在寻找，但我没有想法。
确定您认为哪些动作是活动的标志 - 不要使用鼠标移动或按键，而是在您的应用程序中使用逻辑动作，例如“用户更改值”、“用户导航”、 “内容已加载” - 并使用这些逻辑应用程序操作来重置空闲超时。不要使用特定的输入设备（鼠标/键盘等），除非这是您的应用程序的特定要求（例如，半自动驾驶汽车如何要求用户在方向盘上进行专门交互以确保人类处于控制之中）

标签： c# asp.net-core blazor blazor-server-side

【解决方案1】：

使用 JavaScript onmousemove 和 onkeypress 事件触发 Razor 组件中的 Timer 函数可以识别用户是活跃还是不活跃。如果用户没有执行任何 onmousemove 或 onkeypress 事件，则认为用户处于非活动状态，并且在特定 TimeInterval 之后调用 Timer 函数以[执行您想要执行的任何操作。

打开 _Host.cshtml 并更新如下。在 JavaScript 中调用 onmousemove 和 onkeypress 属性函数来触发 Razor 组件中的 Timer 函数。

<body>
     // . . .
     <script>
         function timeOutCall(dotnethelper) {
             document.onmousemove = resetTimeDelay;
             document.onkeypress = resetTimeDelay;
  
             function resetTimeDelay() {
                 dotnethelper.invokeMethodAsync("TimerInterval");
             }
         }
     </script>
 </body>

现在打开 MainLayout.razor 并调用 Timer 方法来识别用户是否处于活动状态。当发现用户处于非活动状态时，您可以在方法中添加代码

@using System.Timers
@inject IJSRuntime JSRuntime
  
 // . . .
 @code {
     private Timer timerObj;
  
     protected override async Task OnInitializedAsync()
     {
         // Set the Timer delay.
         timerObj = new Timer(7000);
         timerObj.Elapsed += UpdateTimer;
         timerObj.AutoReset = false;
         // Identify whether the user is active or inactive using onmousemove and onkeypress in JS function.
         await JSRuntime.InvokeVoidAsync("timeOutCall", DotNetObjectReference.Create(this));
     }
  
     [JSInvokable]
     public void TimerInterval()
     {
         // Resetting the Timer if the user in active state.
         timerObj.Stop();
         // Call the TimeInterval to logout when the user is inactive.
         timerObj.Start();
     }
  
     private void UpdateTimer(Object source, ElapsedEventArgs e)
     {
         InvokeAsync(async() => {

             // ======> DO WHATEVER YOU WANT TO DO HERE <======

         });
     }
 }

【讨论】：

使用未经过滤的鼠标事件是个坏主意 - 不仅因为它产生的调用量很大，而且因为大量不使用鼠标的用户。