package com.alatus.config.handler; import com.alatus.constant.Constants; import com.alatus.model.TUser; import com.alatus.result.R; import com.alatus.service.RedisService; import com.alatus.util.JSONUtils; import com.alatus.util.JWTUtils; import com.alatus.util.ResponseUtils; import jakarta.annotation.Resource; import jakarta.servlet.ServletException; import jakarta.servlet.http.HttpServletRequest; import jakarta.servlet.http.HttpServletResponse; import org.springframework.security.core.Authentication; import org.springframework.security.web.authentication.AuthenticationSuccessHandler; import org.springframework.stereotype.Component; import java.io.IOException; import java.util.concurrent.TimeUnit; @Component public class MyAuthenticationSuccessHandler implements AuthenticationSuccessHandler { @Resource private RedisService redisService; @Override public void onAuthenticationSuccess(HttpServletRequest request, HttpServletResponse response, Authentication authentication) throws IOException, ServletException { //由于禁用了session,我们在登录成功后,需要在服务器保持用户的登录状态,前端下次来访问服务器端的时候,服务器端要知道这个人登录了 TUser tUser = (TUser) authentication.getPrincipal(); // 登录成功的统一结果 R result = R.OK(tUser); // 把R对象转为JSON String resultJSON = JSONUtils.toJSON(result); // 生成jwt String jwt = JWTUtils.createJWT(resultJSON); String key = Constants.REDIS_JWT_KEY+tUser.getId(); // 写入Redis redisService.setValue(key,jwt); // 设置jwt的过期时间,如果选择了记住我,jwt过期时间为七天,否则是30分钟 Boolean rememberMe = Boolean.valueOf(request.getParameter("rememberMe")); if(rememberMe){ redisService.expire(key,Constants.EXPIRE_TIME, TimeUnit.SECONDS); } else{ redisService.expire(key,Constants.DEFAULT_EXPIRE_TIME,TimeUnit.SECONDS); } // 把R以JSON传回前端 ResponseUtils.write(response,jwt); } }
package com.alatus.config.handler; import com.alatus.constant.Constants; import com.alatus.model.TUser; import com.alatus.result.R; import com.alatus.service.RedisService; import com.alatus.util.JSONUtils; import com.alatus.util.JWTUtils; import com.alatus.util.ResponseUtils; import jakarta.annotation.Resource; import jakarta.servlet.ServletException; import jakarta.servlet.http.HttpServletRequest; import jakarta.servlet.http.HttpServletResponse; import org.springframework.security.core.Authentication; import org.springframework.security.web.authentication.AuthenticationSuccessHandler; import org.springframework.stereotype.Component; import java.io.IOException; import java.util.concurrent.TimeUnit; @Component public class MyAuthenticationSuccessHandler implements AuthenticationSuccessHandler { @Resource private RedisService redisService; @Override public void onAuthenticationSuccess(HttpServletRequest request, HttpServletResponse response, Authentication authentication) throws IOException, ServletException { //由于禁用了session,我们在登录成功后,需要在服务器保持用户的登录状态,前端下次来访问服务器端的时候,服务器端要知道这个人登录了 TUser tUser = (TUser) authentication.getPrincipal(); // 登录成功的统一结果 R result = R.OK(tUser); // 把R对象转为JSON String resultJSON = JSONUtils.toJSON(result); // 生成jwt String jwt = JWTUtils.createJWT(resultJSON); String key = Constants.REDIS_JWT_KEY+tUser.getId(); // 写入Redis redisService.setValue(key,jwt); // 设置jwt的过期时间,如果选择了记住我,jwt过期时间为七天,否则是30分钟 Boolean rememberMe = Boolean.valueOf(request.getParameter("rememberMe")); if(rememberMe){ redisService.expire(key,Constants.EXPIRE_TIME, TimeUnit.SECONDS); } else{ redisService.expire(key,Constants.DEFAULT_EXPIRE_TIME,TimeUnit.SECONDS); } // 把R以JSON传回前端 ResponseUtils.write(response,jwt); } }
--- spring: data: redis: lettuce: pool: max-idle: 8 min-idle: 0 max-wait: -1ms max-active: 8 cluster: refresh: adaptive: true period: 2000 cluster: max-redirects: 3 nodes: 192.168.189.128:6381,192.168.189.128:6382,192.168.189.130:6383,192.168.189.130:6384,192.168.189.129:6385,192.168.189.129:6386 password: abc123 database: 0 timeout: 5000 --- server: port: 8089 servlet: context-path: / session: persistent: false --- spring: datasource: url: jdbc:mysql://127.0.0.1:3306/dlyk?useUnicode=true&characterEncoding=utf-8&useSSL=false driver-class-name: com.mysql.cj.jdbc.Driver username: root password: abc123 hikari: maximum-pool-size: 30 minimum-idle: 30 connection-timeout: 5000 idle-timeout: 0 max-lifetime: 18000000 --- mybatis: mapper-locations: classpath:mapper/*.xml
--- spring: data: redis: lettuce: pool: max-idle: 8 min-idle: 0 max-wait: -1ms max-active: 8 cluster: refresh: adaptive: true period: 2000 cluster: max-redirects: 3 nodes: 192.168.189.128:6381,192.168.189.128:6382,192.168.189.130:6383,192.168.189.130:6384,192.168.189.129:6385,192.168.189.129:6386 password: abc123 database: 0 timeout: 5000 --- server: port: 8089 servlet: context-path: / session: persistent: false --- spring: datasource: url: jdbc:mysql://127.0.0.1:3306/dlyk?useUnicode=true&characterEncoding=utf-8&useSSL=false driver-class-name: com.mysql.cj.jdbc.Driver username: root password: abc123 hikari: maximum-pool-size: 30 minimum-idle: 30 connection-timeout: 5000 idle-timeout: 0 max-lifetime: 18000000 --- mybatis: mapper-locations: classpath:mapper/*.xml
欢迎使用CRM系统
欢迎登陆登录
欢迎使用CRM系统
欢迎登陆
登录
import { messageTip } from "../util/util.js"
import { doPost } from '../http/httpRequest';
export default {
name : "LoginView",
data(){
return {
user : {
loginAct : "",
loginPwd : "",
rememberMe : false
},
// 定义登录表单的验证规则
loginRules : {
// 账号验证规则
loginAct : [
{ required: true, message: '请输入登录账号', trigger: 'blur' },
{ min: 3, max: 15, message: '账号长度不合法', trigger: 'blur' },
],
// 密码验证规则
loginPwd : [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 6, max: 18, message: '密码长度不合法', trigger: 'blur' },
]
}
}
},
methods : {
// 将页面上的函数在此定义
login(){
// 提交前要验证合法性
this.$refs.loginRefForm.validate((isValid) => {
// isValid是验证后回传的结果,true为通过
if(isValid){
// 验证通过,可以提交
let formData = new FormData();
// 可以视为map,是json对象
// 内部以键值对形式提交数据给后台
formData.append("loginAct",this.user.loginAct);
formData.append("loginPwd",this.user.loginPwd);
formData.append("rememberMe",this.user.rememberMe);
// 不要用对象传,用formData传递数据
doPost("/api/login",formData).then((resp) => {
console.log(resp);
if(resp.status === 200){
messageTip('登陆成功,即将跳转到主页',"success");
// 存储jwt
if(this.user.rememberMe === true){
window.localStorage.setItem("crmSystem",resp.data);
}
else{
window.sessionStorage.setItem("crmSystem",resp.data);
}
window.location.href="/dashboard"
}
else{
messageTip('登陆失败,请检查您的信息',"error");
}
});
}
});
}
}
}
.el-aside {
background: black;
width: 40%;
text-align: center;
}
.imgTitle {
color: white;
font-size: 28px;
font-weight: bold;
}
.el-aside img {
height: 30%;
}
.el-main {
width: 60%;
/* 使用JS实现铺满 */
/* 设置为100%屏幕高度 */
height: calc(100vh);
}
.el-form {
width: 60%;
margin: auto;
}
.loginTitle{
text-align: center;
margin-top: 10%;
margin-bottom: 5%;
font-size: 30px;
font-weight: bold;
}
.el-button{
width: 100%;
}