当用户在Laravel 5.6中输入无效凭据时,如何在登录模式窗体上显示错误?

时间:2018-06-03 08:07:03

标签: laravel modal-dialog bootstrap-modal laravel-5.6 laravel-authentication

在Laravel 5.6中,我正在使用它的默认身份验证功能。但是我已经实现了一个模态来替换默认的登录表单。我试图保持登录模式窗体打开并在登录尝试失败时显示错误。我的登录模式表单如下所示:

<!-- Modal HTML Markup -->
<div id="login-modal" class="modal fade">
 <div class="modal-dialog" role="document">
  <div class="modal-content">
   <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
    <h1 class="modal-title">Login</h1>
   </div>

    <div class="modal-body">
     <div class="cs-login-form">
      <form role="form" method="POST" action="{{ url('/login') }}">
       <div class="input-holder">
        {{ csrf_field() }}
        <div class="form-group">
         <label for="email" class="control-label">E-Mail Address</label>
          <div>
           <input id="email" type="email" class="form-control" name="email" value="{{ old('email') }}" autofocus>
          </div>
         </div>
        </div>
        <div class="input-holder">
         <div class="form-group">
          <label for="password" class="control-label">Password</label>
         <div>
         <input id="password" type="password" class="form-control" name="password">
         </div>
        </div>

       </div>


       <div class="form-group">
       <div>
        <div class="checkbox">
         <label>
          <input type="checkbox" name="remember"> Remember Me
         </label>
        </div>
       </div>
       </div>

       <div class="form-group">
        <div>
         <button type="submit" class="btn btn-primary">
          Login
         </button>
         <a class="btn btn-link" href="{{ url('/password/reset') }}">
          Forgot Your Password?
         </a>
        </div>
       </div>
      </form>
     </div>    
    </div>
   </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
 </div>

目前,当用户输入无效凭据时,模态将消失,用户将被重定向回主页而不会出现错误。我的登录控制器没有被改变,看起来像这样

<?php

namespace App\Http\Controllers\Auth;

use App\Http\Controllers\Controller;
use Illuminate\Foundation\Auth\AuthenticatesUsers;

class LoginController extends Controller
{
/*
|--------------------------------------------------------------------------
| Login Controller
|--------------------------------------------------------------------------
|
| This controller handles authenticating users for the application and
| redirecting them to your home screen. The controller uses a trait
| to conveniently provide its functionality to your applications.
|
*/

use AuthenticatesUsers;

/**
 * Where to redirect users after login.
 *
 * @var string
 */
protected $redirectTo = '/home';

/**
 * Create a new controller instance.
 *
 * @return void
 */
public function __construct()
{
    $this->middleware('guest')->except('logout');
}
}

3 个答案:

答案 0 :(得分:0)

您可以使用ajax电话提交您的凭据,然后在您的成功方法中,您可以检查它是否成功&amp;如果不正确则显示错误。如果没问题,你可以手动隐藏模态&amp;将用户重定向到主页。

答案 1 :(得分:0)

您需要手动设置功能,Laravel's documentation说明。您还需要一个路由和一个ajax请求来登录。

自定义登录路线:

Route::post('/login', 'LoginController@authenticate');

在您的视图中,您首先需要使用csrf令牌设置元标记以防止攻击:

<meta name="csrf-token" content="{{ csrf_token() }}">

然后在你的ajax中你可以这样做:

$.ajax({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    },
    type: 'POST',
    url: '/login',
    data: [email: '', password: ''],
    success: function(controllerResponse) {
        if (!controllerResponse) {
           // here show a hidden field inside your modal by setting his visibility 
        } else {
           // controller return was true so you can redirect or do whatever you wish to do here
        }
    }
});

自定义控制器方法可能是这样的:

public function authenticate(Request $request)
{
    $credentials = $request->only('email', 'password');

    if (Auth::attempt($credentials)) {
        // Authentication passed...
        return true;
    } else {
        return false;
    }
}

*重要说明:请注意我还没有完全编码evrything,因为stackoverflow是解决无法编码其他人的问题,因此您需要弄清楚如何选择表单数据js,并创建错误消息,并在控制器返回false时显示它。

此外,控制器非常基本,您可以通过控制某个用户的最大登录尝试等功能来改进它。*

答案 2 :(得分:-1)

您可以使用会话变量$ _SESSION [&#39;错误&#39;]。并在您的登录表单上写一个if条件,如

if(isset($ _ SESSION [&#39; error&#39;])echo&#34;您的错误消息。&#34;)

只是在那之后取消设置会话变量