一:登录功能
1.前端输入用户名和密码校验通过之后发送异步请求,并传递参数
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){//登录成功
//跳转到后台首页
this.$router.push({ path: '/echarts' });
//关闭加载框
this.logining = false;
}else{//登录失败
this.logining = false;
this.$message.error(res.data.message);
}
}).catch(res=>{
this.$message.warning("系统繁忙,请稍后重试!");
})
} else {
this.$message.warning("表单验证未通过");
}
});
}
2.后端接收数据并编写登录业务
a.SystemController
//后端怎么接收多个数据:对象【自定义对象 + 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,"系统繁忙,请稍后重试!");
}
}
b.登录业务
@Override
public SysUser login(Map<String, String> map) {
String userName = map.get("userName");
String password = map.get("password");
//一:判空,前端虽然做了校验,后端也要校验,前端的代码不安全容易被禁用
if(StrUtil.isEmptyIfStr(userName) || StrUtil.isEmptyIfStr(password)){
throw new BusinessException("信息不能为空");
}
//二:判断用户名
SysUser sysUser = sysUserMapper.findByUserName(userName);
if(sysUser == null){
throw new BusinessException("用户名不存在");
}
//三:校验密码,要保证添加数据或注册的时候也要用SecureUtil.md5进行加密
if(!sysUser.getPassword().equals(SecureUtil.md5(password))){
throw new BusinessException("密码不正确");
}
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>
二:前端显示用户名
三:登录拦截
登录拦截的目的:防止不登录就访问受限资源
登录拦截的业务:判断session中是否有登录信息,有放行,如果没有跳转到登录页面
登录拦截实现:
1.登录成功将登录信息放在session中
session.setAttribute("user_in_session",sysUser);
2.写一个类实现HandlerInterceptor接口,实现一个preHandler方法
@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){//没有登录或登录过期了
//跳转到登录页面
System.out.println("跳转到登录页面");
//拦截
return false;
}
//放行
return true;
}
}
3.配置
@Configuration
public class LoginConfig implements WebMvcConfigurer {
@Autowired
private LoginInterceptor loginInterceptor;
@Override
public void addInterceptors(InterceptorRegistry registry) {
registry.addInterceptor(loginInterceptor)
.addPathPatterns("/**")
//只要跟登录,注册,测试相关的都要排除调
.excludePathPatterns("/login");
}
}
================================================================
问题:前后端分离项目无法自动传递Cookie,需要配置
在main.js中配置:axios.defaults.withCredentials = true; //当前请求为跨域类型时,是否在请求中协带cookie