如何在登录失败时显示错误消息?

Posted

技术标签:

【中文标题】如何在登录失败时显示错误消息?【英文标题】:How can show error message in failed login? 【发布时间】:2019-11-01 02:44:11 【问题描述】:

我使用以下命令制作认证系统:

php artisan make:auth

它工作正常。但是当我尝试自定义设计和其他东西时,一切对我来说似乎都很混乱。即:当我尝试使用错误的凭据时,我无法显示如下消息:“无效的用户名/密码”。我检查了 Auth 文件夹中的所有控制器,但没有详细代码。我的要求很简单:我只想从控制器传递错误消息以查看并使用我自定义设计的 html 模板显示它。这是我的登录表单:

@extends('layouts.login')

@section('content')
    <div class="content">
        <!-- BEGIN LOGIN FORM -->
        <form class="login-form" method="POST" action=" route('login') ">
            @csrf

            <h3 class="form-title">Login to your account</h3>
             CUSTOM_ERROR_MESSAGE_IF_LOGIN_FAILED
            <div class="alert alert-danger display-hide">
                <button class="close" data-close="alert"></button>
                <span>
            Enter any username and password. </span>
            </div>
            <div class="form-group">
                <!--ie8, ie9 does not support html5 placeholder, so we just show field title for that-->
                <label class="control-label visible-ie8 visible-ie9">Username</label>
                <div class="input-icon">
                    <i class="fa fa-user"></i>
                    <!-- <input class="form-control placeholder-no-fix" type="text" autocomplete="off" placeholder="Username" name="username"/> -->
                    <input id="email" type="email" class="form-control placeholder-no-fix" name="email" value=" old('email') " required autocomplete="email" autofocus>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label visible-ie8 visible-ie9">Password</label>
                <div class="input-icon">
                    <i class="fa fa-lock"></i>
                    <!-- <input class="form-control placeholder-no-fix" type="password" autocomplete="off" placeholder="Password" name="password"/> -->
                    <input id="password" type="password" class="form-control placeholder-no-fix" name="password" required autocomplete="current-password">

                </div>
            </div>
            <div class="form-actions">
                <label class="checkbox">
                    <!-- <input type="checkbox" name="remember" value="1"/>  -->
                    <input class="form-check-input" type="checkbox" name="remember" id="remember"  old('remember') ? 'checked' : '' >
                    Remember me </label>

                <button type="submit" class="btn blue pull-right">
                    Login <i class="m-icon-swapright m-icon-white"></i>
                </button>
            </div>

            <div class="forget-password">
                <h4>Forgot your password ?</h4>
                <p>
                    no worries, click <a href=" route('password.request') " >
                        here </a>
                    to reset your password.
                </p>
            </div>
            <div class="create-account">
                <p>
                    Don't have an account yet ?&nbsp; <a href="javascript:;" id="register-btn">
                        Create an account </a>
                </p>
            </div>
        </form>
        <!-- END LOGIN FORM -->

    </div>

@endsection

如何显示 CUSTOM_ERROR_MESSAGE_IF_LOGIN_FAILED?

【问题讨论】:

【参考方案1】:

您可以使用以下方式输出错误消息:

@if(count($errors) > 0)
 @foreach( $errors->all() as $message )
  <div class="alert alert-danger display-hide">
   <button class="close" data-close="alert"></button>
   <span> $message </span>
  </div>
 @endforeach
@endif

如果您有自定义路由,则需要从控制器重定向到登录页面并传递错误:

$errors = ['ur errors'];
return redirect()->back()->withErrors($errors);

【讨论】:

【参考方案2】:

首先,相信我,我们都去过你现在所在的地方。学习新框架及其工作原理时会感到沮丧。

一个忠告是彻底阅读文档,当谈到 Laravel 时,没有什么是你找不到的。好吧,至少没有你经常需要的基础知识。

关于你的问题,你说:

我只想从控制器传递错误消息以查看并显示它 使用我自定义设计的 HTML 模板。

所以我要大胆猜测一下,你是在自己处理登录过程,而不是使用内置的 Laravel 功能。

如果我错了,你使用的是 laravel 登录功能,那么你需要做的就是:

案例 1:当您使用构建在 Laravel 登录功能时

@if ($errors->has('email'))
    <span class="invalid-feedback">
        <strong> $errors->first('email') </strong>
    </span>
@endif

当输入错误的凭据并尝试登录时,Laravel 会返回带有“电子邮件”键的错误,因此只需使用 $errors-&gt;first('email') 打印消息,无论您想要什么,并根据您的喜好设置样式。

现在,如果我是对的并且您使用的是自定义登录方法:

案例 2:当您使用自定义登录功能时

在您的控制器中,您可以像这样自定义消息:

$messages = [
    'email.required' => 'Email is required!',
    'password.required' => 'Password is required!'
];

$validatedData = $request->validate([
    'email' => 'required|email',
    'password' => 'required|string',
], $messages);

当然,这只是一个示例,您可以有各种验证和各自的自定义消息。如果你想使用内置的验证错误消息,那么就不要像这样提供消息数组:

$validatedData = $request->validate([
    'email' => 'required|email',
    'password' => 'required|string',
]);

当你在$request 上使用validate() 方法时,如果验证失败,Laravel 默认返回一个有效的错误响应给刀片,这个响应的键和你的请求变量名称和值作为错误消息和你可以轻松访问它们,与案例 1 相同:

@if ($errors->has('email'))
    <span class="invalid-feedback">
        <strong> $errors->first('email') </strong>
    </span>
@endif

你已经准备好了。 最终,除了验证以下用例之外,您可能还想从您的控制器返回一些自定义错误:

案例 3:当您使用自定义登录功能并希望返回一些自定义错误消息而不是验证时

在你的控制器内部使用withErrors() 方法:

return Redirect::back()->withErrors(
    [
        'email' => 'Snap! you are done!'
    ]
);

您可能已经猜到了,在视图中显示此错误与之前完全相同:

@if ($errors->has('email'))
    <span class="invalid-feedback">
        <strong> $errors->first('email') </strong>
    </span>
@endif

希望对你有帮助

编码愉快:)

【讨论】:

很高兴为您提供帮助,如果对您有帮助,请标记为已接受,以便在堆栈溢出时关闭此线程。 这个答案是为 Laravel 5.3 编写的,从那时起发生了很大的变化,所以他们可能已经删除了第三种情况或改变了它的格式,请查阅您正在使用的 Laravel 版本的文档。跨度> 【参考方案3】:

好吧,有一次我将鼠标悬停在同样的问题上,但发现消息在那里,唯一的错误是包含错误消息的元素被 display:none 隐藏并更改为 .invalid-feedback display: inline-block !important;

之后,我能够看到所有错误消息。此外,我还在 LoginController 中覆盖了 AuthenticatesUsers

中的方法 sendFailedLoginResponse
  `protected function sendFailedLoginResponse(Request $request)
   
    throw ValidationException::withMessages([
        $this->username() => [trans('auth.failed')],
        'password' => [trans('auth.password')],
    ]);
   `

【讨论】:

以上是关于如何在登录失败时显示错误消息?的主要内容,如果未能解决你的问题,请参考以下文章

当用户使用 Spring Boot 登录失败时,如何在登录页面中显示错误消息?

Python/Django:如何在无效登录时显示错误消息?

当 Apollo GraphQL 失败并出现错误时显示 MatSnackBar 消息

在 AFHTTPRequestOperation 失败时显示 UIAlertView

Flutter 在登录时显示微调器

StreamBuilder snapshot.hasError 在键盘显示/隐藏颤动时显示多次