Laravel登录次数限制计数器不显示问题求助

我是编程新手，正在开发Laravel项目，想要实现登录密码错误5次后触发限时锁定的功能。已修改LoginController.php编写自定义登录逻辑，代码运行正常，但达到限制次数后，login.blade.php页面的计数器无法显示。测试插入简单JS代码也无法正常显示文本，不清楚问题所在，求解决方法。

LoginController.php 代码 #

$validate = Validator::make($request->all(), [
            'email' => ['required', 'string'],
            'password' => ['required', 'string'],
        ]);

        // If Validator Fail
        if ($validate->fails()) {
            $is_limit = 0;
            $refresh_time = 0;
            return redirect('/login')->with([$is_limit, $refresh_time])->withErrors($validate)->withInput();
        }

        if (Auth::attempt(['email' => $request->email, 'password' => $request->password])) {
            // Trying to log in
            Session::put('working_area', null);
            return redirect($this->redirectTo);
        }

        $data = $this->limit_check($request->email);
        $is_limit = $data[0];
        $refresh_time = $data[1];
        $email = $request->email;
        // return $data;
        return view('auth.login', compact('is_limit', 'refresh_time', 'email'));

login.blade.php 代码 #

@extends('layouts.auth')

@section('content')

<div class="logo">
    <img src="{{ asset('public/images/authentication/sign-in-logo.svg') }}" alt="">
</div>
<div class="whitebox">
    <img src="{{ asset('public/images/authentication/sign-in-whitebox.svg') }}" alt="">
</div>
<div class="whitebox-text">
    <div class="subtitle"><span>&#62;&#46;&nbsp;</span><span id="typewritter">SIGN IN</span></div>
    <div class="form-group">
        <form action="{{ route('login') }}" method="POST">
        @method('POST')
        @csrf
        <div class="field-holder">
            <input class="form-input @error('email') is-invalid @enderror" type="email" id="email" name="email" value="{{ $email }}" required>
            <label for="email">email</label>
            @error('email')
                <div class="alert alert-danger">{{ $message }}</div>
            @enderror
        </div>
        <div class="field-holder">
            <input class="form-input" type="password" id="password" name="password" required>
            <label for="password">password</label>
        </div>
        <div class="field-link">
            <a href="{{ route('password.email') }}" id="forgot">FORGOT PASSWORD</a>
        </div>
        <div class="field-holder">
            <div id="refreshTime">
                <span id="title"></span>
                <span id="time"></span>
            </div>
            <button class="btn" id="submit">SIGN IN</button>
        </div>
    </div>
    <div class="title">ASSET MANAGEMENT SYSTEM</div>
</div>
<script>
    let is_limit = @json($is_limit);
    let refresh_time = @json($refresh_time);
    let email = @json($email);
    if (is_limit == 1) {
        document.getElementById('title').innerHtml = 'refresh time : ';
        setInterval(() => {
            document.getElementById('time').innerHtml = refresh_time; 
        }, refresh_time);
    }
</script>
@endsection

测试用JS代码 #

document.getElementBy('time').innerHTML = "refresh in :"

页面引入的脚本 #

<script src="{{asset('public/dist/bootstrap-5.1.3/js/bootstrap.js')}}"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>

问题排查与解决方法 #

1. JS属性名拼写错误
   代码里写的innerHtml是错误的，正确属性名为innerHTML（字母H大写），这是文本无法渲染的核心原因。修改后：

   document.getElementById('title').innerHTML = 'refresh time : ';
   document.getElementById('time').innerHTML = refresh_time;
   

2. 测试JS的API调用错误
   测试代码里的document.getElementBy('time')语法错误，正确获取元素的方法是document.getElementById('time')，缺少Id后缀。

3. 倒计时逻辑错误
   当前setInterval直接用refresh_time作为间隔时间，且每次显示固定值，无法实现倒计时效果。正确逻辑应该是每秒递减时间：

   if (is_limit == 1) {
       let remainingTime = refresh_time;
       document.getElementById('title').innerHTML = 'refresh time : ';
       document.getElementById('time').innerHTML = remainingTime;
       const timer = setInterval(() => {
           remainingTime--;
           document.getElementById('time').innerHTML = remainingTime;
           if (remainingTime <= 0) {
               clearInterval(timer);
               window.location.reload(); // 时间到后刷新页面解锁
           }
       }, 1000);
   }
   

4. 重定向参数传递错误
   校验失败分支里，redirect()->with([$is_limit, $refresh_time])的写法错误，with()需要键值对传递参数：

   return redirect('/login')
       ->with('is_limit', $is_limit)
       ->with('refresh_time', $refresh_time)
       ->withErrors($validate)
       ->withInput();
   

   同时blade模板里要兼容重定向和直接返回视图的场景，修改JS变量获取逻辑：

   let is_limit = @json(session('is_limit', $is_limit ?? 0));
   let refresh_time = @json(session('refresh_time', $refresh_time ?? 0));
   let email = @json(old('email', $email ?? ''));
   

5. 确认limit_check返回值格式
   确保$this->limit_check($request->email)返回的数组中，锁定状态（$data[0]）为1时，$data[1]是正确的剩余秒数（比如60代表锁定1分钟）。

内容的提问来源于stack exchange，提问作者Fajar Rizkan