本文只提供验证码模式
1.获取权限code (例如csdn等网站 点击微信登录时就是一个获取code的过程) 地址:http://192.168.xx1.xx1:600/oauth/authorize?client_id=user-vue&response_type=code&redirect_uri=http://192.168.xx.xx:8080/excessive?
redirectTo=http://192.168.xx.xx:8080/home (后面的参数解释可以参考前文)实现token过期后重新获取token并跳转到原页面 本地址的为跳转到主页 home页
2.判断没有登录 则跳转到loginPage页面(是通过通过thymeleaf跳转到接口) 在下图1中配置
3.点击登录 会调用/login接口 在上图2中配置
4 登录成功 跳转到http://192.168.xx.xx:8080/excessive获取token
代码
LoginController
thymeleaf跳珠到登录页面
@Controller
public class LoginController {
/**
* thymeleaf指定登录页面
*
* @param model
* @return
*/
@GetMapping("/loginPage")
public String index(Model model) {
return "/login";
}
}
login页面
spring security认证异常后返回中文提示 这篇文章 在错误显示生效
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>登录</title>
</head>
<style>
.login-container {
margin: 50px;
width: 100%;
}
.form-container {
margin: 0px auto;
width: 50%;
text-align: center;
box-shadow: 1px 1px 10px #888888;
height: 300px;
padding: 5px;
}
input {
margin-top: 10px;
width: 350px;
height: 30px;
border-radius: 3px;
border: 1px #E9686B solid;
padding-left: 2px;
}
.btn {
width: 350px;
height: 35px;
line-height: 35px;
cursor: pointer;
margin-top: 20px;
border-radius: 3px;
background-color: #E9686B;
color: white;
border: none;
font-size: 15px;
}
.title {
margin-top: 5px;
font-size: 18px;
color: #E9686B;
}
</style>
<body>
<div class="login-container">
<div class="form-container">
<p class="title">用户登录</p>
<form th:action="@{/login}" method="post">
<div class="input-group mb-3">
<input name="username" type="text" class="form-control" placeholder="用户名">
<div class="input-group-append">
<div class="input-group-text">
<span class="fa fa-user"></span>
</div>
</div>
</div>
<div class="input-group mb-3">
<input name="password" type="password" class="form-control" placeholder="密码">
<div class="input-group-append">
<div class="input-group-text">
<span class="fas fa-lock"></span>
</div>
</div>
</div>
<div class="row mb-2 ">
<div class="col-6">
<input name="code" type="text" class="form-control" placeholder="验证码">
</div>
<div class="col-6">
<img onclick="this.src='/code/image?'+Math.random()" src="/code/image"
alt="验证码"/>
</div>
</div>
<!-- 提示信息, 表达式红线没关系,忽略它 前文返回的中文信息会在此显示 -->
<div th:if="${param.error}">
<span th:text="${session.SPRING_SECURITY_LAST_EXCEPTION?.message}" style="color:red">用户名或密码错误</span>
</div>
<div class="row">
<div class="col-8">
<div class="icheck-primary">
<input name="remember-me" type="checkbox" id="remember">
<label for="remember">
记住我
</label>
</div>
</div>
<!-- /.col -->
<div class="col-4">
<button type="submit" class="btn btn-primary btn-block">登录</button>
</div>
<!-- /.col -->
</div>
</form>
</div>
</div>
</body>
</html>