需求:
springboot登陆页面进行登陆验证,并完成登陆跳转。错误的账户提示用户名密码错误,正确的账户跳转到dashboard页面。
同时加上登陆拦截器,对于错误的账户不允许直接访问dashboard页面。
或者下载源码
实现步骤:
一 登陆验证
实现输入正确的用户名密码直接进入dashboard页面,输入错误提示用户名密码错误。
1. 要实现登录,我们需要先编写一个登录的controller类:
@Controller
public class LoginController {
@RequestMapping("login")
public String gologin()
{
return "login";
}
@PostMapping(value="/login")
public String login(@RequestParam("username") String username, @RequestParam("password") String password, Map<String,Object> map,
HttpSession session){
//验证用户名和密码,输入正确,跳转到dashboard
if(!StringUtils.isEmpty(username)&&"123".equals(password)){
session.setAttribute("userName",username);
System.out.println("----" + username);
map.put("age",30);
return "redirect:/dashboard";
}
else //输入错误,清空session,提示用户名密码错误
{
session.invalidate();
map.put("msg","用户名密码错误");
return "login";
}
}
@RequestMapping("dashboard")
public String goMain(Map<String,Object> map)
{
map.put("name","zhangfang");
map.put("age",28);
map.put("sex","女");
return "dashboard";
}
}
(1)发送post请求,代替了RequestMapping(value="/login", method="post")
(2)跳转页面时使用 return ”redirect:/ dashboard“,而不是 return ”dashboard“ .
return ”redirect:/ dashboard“,会直接调用controller,
return ”dashboard“ 只会访问目录下的文件
2. 登陆页面 login.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Signin Template for Bootstrap</title>
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/css/signin.css" rel="stylesheet">
<script src="assets/js/jquery-3.4.0.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
</head>
<body class="text-center">
<form class="form-signin" th:action="@{/login}" method="post">
<!-- 取值替换原来默认的值-->
<img class="mb-4" src="assets/img/bootstrap-solid.svg" alt="" width="72" height="72">
<h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
<p style="color:red" th:text="${msg}" th:if="${not #strings.isEmpty(msg)}"></p>
<label class="sr-only" >Username</label>
<input type="text" name="username" class="form-control" placeholder="Username"
required="" autofocus="">
<label class="sr-only" >Password</label>
<input type="password" name="password" class="form-control" placeholder="Password"
required="">
<div class="checkbox mb-3">
<label>
<input type="checkbox" value="remember-me"/> Remember me
</label>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit" >Sign in</button>
<p class="mt-5 mb-3 text-muted">© 2019-2020</p>
</form>
</body>
(1)action 配置为th:action="@{/login}" method="post"
添加th:action,告诉模板,我们要跳转的请求是/login,而且是post请求的;
告诉模板,我们的参数名称是username和password,这也是controller类中设定的参数值,要完全一致。
<input type="text" name="username" class="form-control" placeholder="Username">
(3)我们之前说如果账号密码不对,要有个msg提示,可这msg在模板中并没有表现,所以,我们要在html中添加一段关于msg的判断:如果msg是空,就不展示mgs,如果不为空就展示:我在下方还用到了th:if语句,这个在官方文档中有记录如何使用,而且优先级比较高,所以会优先判断这个方法是否生效,然后才展示text。
<p style="color: red;" th:text="${msg}" th:if="${not #strings.isEmpty(msg)}"></p>
3.简单dashboard页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>注册成功</h1>
姓名:<spn th:text="${name}"></spn>
年龄:<spn th:text="${age}"></spn>
性别:<spn th:text="${sex}"></spn>
</body>
</html>
4. properties配置
server.servlet.context-path=/tiger
server.port=8091
spring.thymeleaf.cache=false
为了开发方便,我们还可以将application.properties中添加一个 禁用缓存的参数: spring.thymeleaf.cache=fasle ,这样html页面有改动的时候,我们只需要用快捷键crtl+F9或者点击如图的编译按钮,重新编译下就可以在页面看结果,而不需要再次启动Tomcat服务了
5. 运行效果
二. 配置拦截器
我们在不输入用户名密码的时候,在地址栏里直接输入
http://localhost:8091/tiger/dashboard 也能直接访问地址。这是不允许的。所以需要配置拦截器,当用户密码不正确的时候,页面直接跳转到登陆页面,并显示无权限访问。
1.先添加一个HandlerInterceptor拦截器
我们新建一个登录的拦截器在component包下,名字就叫 LoginHandlerInterceptor (实现接口HandlerInterceptor),IDEA编译器,我们按ctrl+O,把需要用到的三个接口都拉出来,然后开始编写:
@Component
public class LoginHandlerInterceptor implements HandlerInterceptor {
@Override
public void afterCompletion(HttpServletRequest request, HttpServletResponse response, Object handler, Exception ex) throws Exception {
Object user = request.getSession().getAttribute("userName");
System.out.println("afterCompletion----" + user + " ::: " + request.getRequestURL());
}
@Override
public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler, ModelAndView modelAndView) throws Exception {
Object user = request.getSession().getAttribute("userName");
System.out.println("postHandle----" + user + " ::: " + request.getRequestURL());
}
@Override
public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
Object user = request.getSession().getAttribute("userName");
System.out.println("preHandle----" + user + " ::: " + request.getRequestURL());
if (user == null) {
request.setAttribute("msg","无权限请先登录");
// 获取request返回页面到登录页
request.getRequestDispatcher("/index.html").forward(request, response);
return false;
}
return true;
}
}
上边配置的session需要取值才能做判断,那么我们需要在loginController中设置这个session值,以让它生效: session.setAttribute("userName",username);
2. 配置WebMvcConfigurer 拦截器
要让登录有个拦截器的功能,就是除了访问首页我们可以,其他未登录的都拦截下来,所以,需要在MyMvcConfig中添加一个拦截器,让上边的配置都有作用:
@Configuration
public class MyWebMvcConfigurer implements WebMvcConfigurer {
@Override
public void addViewControllers(ViewControllerRegistry registry) {
registry.addViewController("/index.html").setViewName("login");
}
@Override
public void addInterceptors(InterceptorRegistry registry) {
registry.addInterceptor(new LoginHandlerInterceptor())
.addPathPatterns("/**")
.excludePathPatterns("/login","/index.html","/tiger/login")
.excludePathPatterns("/assets/**");
}
}
// 添加拦截的请求,并排除几个不拦截的请求
3. 运行效果
这样,除了首页的请求意外,其他请求都会被拦截下来,我们再看这样配置以后的效果:
当我们直接访问http://localhost:8091/tiger/dashboard时:
这时候,就只能通过拦截器排除的那几个请求来访问和登录后才能正常访问了