1: Login function
1. Send an asynchronous request after the front-end input user name and password verification pass, and pass parameters
handleSubmit2(ev) {
this.$refs.ruleForm2.validate((valid) => {
if (valid) {
this.logining = true; //显示加载框
var loginParams = {
userName: this.ruleForm2.account,
password: this.ruleForm2.checkPass,
};
this.$http.post("/login",loginParams).then(res=>{ if(res.data.success){//Login is successful //Jump to the background homepage this.$router.push({ path : '/echarts' }); //Close the loading box this.logining = false; }else{//Login failed this.logining = false; this.$message.error(res.data.message); } }). catch(res=>{ this.$message.warning("The system is busy, please try again later!"); } ) } else { this.$message.warning("Form validation failed"); } }); }
2. The backend receives data and writes login business
a.SystemController
//How to receive multiple data at the back end: object [custom object + Map]
@PostMapping("/login")
public AjaxResult login(@RequestBody Map<String,String> map){ try { SysUser sysUser = sysUserService .login(map); return new AjaxResult(); } catch (BusinessException e) { return new AjaxResult(false,e.getMessage()); } catch (Exception e) { e.printStackTrace(); return new AjaxResult(false ,"The system is busy, please try again later!"); } } b. Login business @Override
public SysUser login(Map<String, String> map) {
String userName = map.get("userName");
String password = map.get("password");
//1: Empty judgment, although the front-end has done verification, the back-end must also verify, the front-end code is not safe and easy to be disabled
if(StrUtil.isEmptyIfStr(userName) || StrUtil.isEmptyIfStr(password)){ throw new BusinessException ("Information cannot be empty"); }
//2: Determine the user name
SysUser sysUser = sysUserMapper.findByUserName(userName);
if(sysUser == null){ throw new BusinessException("Username does not exist"); } //3: Verify the password, make sure to add data Or use SecureUtil.md5 for encryption when registering if(!sysUser.getPassword().equals(SecureUtil.md5(password))){ throw new BusinessException("The password is incorrect"); } return sysUser; } c. SysUserMapper.xml <!--SysUser findByUserName(String userName);--> <select id="findByUserName" resultType="cn.itsource.domain.SysUser"> select * from sys_user where user_name=#{userName}
</select>
Two: The front end displays the user name
Three: login interception
The purpose of login interception: to prevent access to restricted resources without logging in.
The business of login interception: to determine whether there is login information in the session, and if there is a release, if there is no jump to the login page,
login interception implementation:
1. After successful login, put the login information in the session In
session.setAttribute("user_in_session", sysUser);
2. Write a class to implement the HandlerInterceptor interface and implement a preHandler method
@Component
public class LoginInterceptor implements HandlerInterceptor { @Override public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception { HttpSession session = request.getSession(); Object obj = session.getAttribute("user_in_session"); if(obj == null){//No login or login expired
//Jump to the login page
System.out.println("Jump to the login page");
//Intercept
return false;
}
//Release
return true;
}
}
3. Configure
@Configuration
public class LoginConfig implements WebMvcConfigurer { @Autowired private LoginInterceptor loginInterceptor; @Override public void addInterceptors(InterceptorRegistry registry) {
registry.addInterceptor(loginInterceptor)
.addPathPatterns("/**")
//As long as it is related to login, registration and testing, it must be excluded.excludePathPatterns
("/login");
}
}
========= ==================================================== =====
Problem: The front-end and back-end separation projects cannot automatically transfer cookies, which need to be configured
in main.js: axios.defaults.withCredentials = true; //When the current request is a cross-domain type, whether to include cookies in the request