本次完成自定义的登录页面,错误提醒

1.第一步

在上一节基础之上,我们创建一个类,继承WebSecurityConfigurerAdapter。然后重写configure方法,并加上Configuration和EnableWebSecurity注解。

image.png | left | 827x245

2.第二部

创建一个Controller,增加与config类对应的login和login-error映射的路径,在写一个用来测试的index映射,这个时候要用thymeleaf,这个就不讲了

image.png | left | 350x475

login.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<form class="form-signin" action="/login/form" method="post">
    <h2 class="form-signin-heading">用户登录</h2>
    <table>
        <tr>
            <td>用户名:</td>
            <td><input type="text" name="username" class="form-control" placeholder="请输入用户名"/></td>
        </tr>
        <tr>
            <td>密码:</td>
            <td><input type="password" name="password" class="form-control" placeholder="请输入密码"/></td>
        </tr>
        <tr>

            <td colspan="2">
                <button type="submit" class="btn btn-lg btn-primary btn-block">登录</button>
            </td>
        </tr>
    </table>
</form>
</body>
</html>

login-error.html

<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <title>用户登录</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <link rel="stylesheet" href="/css/sign.css" />
</head>
<body>
<h3>用户名或密码错误</h3>
</body>
</html>

以上OK,我们可以来测试一下

image.png | left | 585x231

进入了我们的登录页面,要求登录,我们把控制台的密码输入进去,默认用户名user。就会跳转到强制登录之前的路径里面
我默认访问根路径。登录成功后直接到了我们index的映射中去,返回如下

image.png | left | 382x80

我们退出去,再重新登录一下,随便输入一个用户名和密码。

image.png | left | 317x102

跳转到我们自定义的错误页面了。
以上是本节内容。欢迎关注我的博客空间

Last modification:December 21st, 2018 at 11:35 am
If you think my article is useful to you, please feel free to appreciate