织梦做的网站能做seo吗,搜索网站排名优化策略,投资公司是做什么的,wordpress 评论倒叙兄弟们#xff0c;继昨天的代码之后#xff0c;继续完成最后的用户模块开发#xff0c;
昨天已经完成了关于用户的信息编辑页面这些#xff0c;今天再完善一下#xff0c; 从后端这边开始吧#xff0c;做一个拦截器#xff0c;对用户做身份校验#xff0c;
拦截器
这…兄弟们继昨天的代码之后继续完成最后的用户模块开发
昨天已经完成了关于用户的信息编辑页面这些今天再完善一下 从后端这边开始吧做一个拦截器对用户做身份校验
拦截器
这边先解释一下吧
那就再用面试题来细说
拦截器相关面试题过滤器与拦截器有什么区别
答
一运行的顺序不同 过滤器是servlet容器接收到请求之后在servlet被调用之前运行的 拦截器则是在servlet被调用之后但是在响应被发送到客户端之前运行的
二配置方式不同 过滤器是在web.xml配置 拦截器是在spring的配置文件中配置或者基于注解进行配置三依赖关系 Filter依赖于Servlet容器而Interceptor不依赖于Servlet容器四能力方面 Filter在过滤器中只能对request和response进行操作 Interceptor可以对requestresponsehandlermodelAndViewexception相当于Interceptor多了对SpringMvc生态下组件的一个操作能力接口规范不同 过滤器需要实现Filter接口拦截器需要实现HandlerInterceptor接口拦截范围不同 过滤器Filter会拦截所有的资源而Interceptor只会拦截Spring环境中的资源 OK来做一个拦截器
创建一个interceptors包并创建LoginInterceptor类
拦截器的类要继承
HandlerInterceptor
注 首先创建拦截器类时需要实现HandlerInterceptor接口。这个接口定义了三个方法preHandle()、postHandle()和afterCompletion()。preHandle()方法是在控制器方法执行之前调用的它返回一个布尔值表示是否继续执行后续操作postHandle()方法是在控制器方法执行之后视图解析之前调用的可以用来对响应进行进一步的处理afterCompletion()方法是在整个请求处理完成之后调用的通常用于资源的清理工作。 其次除了实现HandlerInterceptor接口还可以选择继承HandlerInterceptorAdapter类来简化拦截器的实现。HandlerInterceptorAdapter提供了HandlerInterceptor接口的空实现使得开发者只需要重写自己关心的方法即可。 最后为了让拦截器生效还需要在Spring配置文件中进行相应的配置。这通常涉及到定义一个配置类实现WebMvcConfigurer接口并重写addInterceptors()方法。在这个方法中可以使用addPathPatterns()来指定拦截路径使用excludePathPatterns()来指定排除的路径。 在实际开发中根据需求选择合适的拦截器类型是非常重要的。例如如果需要在Controller层进行权限验证那么使用HandlerInterceptor接口是合适的如果只是对请求进行简单的预处理和后处理那么可以考虑使用WebRequestInterceptor接口。选择合适的拦截器类型可以确保代码的整洁性和可维护性。 下面给出代码
import org.example.cetidenet.utils.JwtUtil;
import org.example.cetidenet.utils.ThreadLocalUtil;
import org.springframework.stereotype.Component;
import org.springframework.web.servlet.HandlerInterceptor;
import org.springframework.web.servlet.ModelAndView;import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.util.Map;Component
public class LoginInterceptor implements HandlerInterceptor {Overridepublic boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {return false;
}Overridepublic void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler, ModelAndView modelAndView) throws Exception {HandlerInterceptor.super.postHandle(request, response, handler, modelAndView);}Overridepublic void afterCompletion(HttpServletRequest request, HttpServletResponse response, Object handler, Exception ex) throws Exception {HandlerInterceptor.super.afterCompletion(request, response, handler, ex);}
}
这里继承HandlerInterceptor之后按快捷键Ctrlo然后继承三种方法就行了这里常用的是第一种preHandle在请求到Controller层之前会被preHandle拦截并处理如果返回不为true则会被拦截。
创建了拦截器之后还要注册拦截器。
这里就在之前创建的config包下进行操作
在之前加载Swagger资源的类下加上代码
Configuration
public class WebConfiguration extends WebMvcConfigurationSupport {Autowiredprivate LoginInterceptor loginInterceptor;Overridepublic void addInterceptors(InterceptorRegistry registry) {//登录接口和注册接口不拦截registry.addInterceptor(loginInterceptor).addPathPatterns(/**).excludePathPatterns(/user/login,/user/register,/doc.html#/home);}
这里有个小坑之前单独创建了一个类继承的是WebMvcConfigurer结果拦截器缺没有起作用如果是这样就继承WebMvcConfigueationSupport
添加了拦截的的路径和放行的路径之后就可以进行检验了 OK这里使用拦截器之后登录接口可以正常使用
而使用更新接口则返回401没有权限。那也就成功了。
JWT令牌
那么使用了拦截器之后拦截了除了登录注册之外的其他的接口那该如何才能让其使用呢必然需要验证身份这里可以使用JWT令牌
也就是在用户登录完成之后发放JWT令牌然后反馈给前端前端携带其到后端拦截器对其进行校验如果带有JWT令牌就放行。 后端引入JWT令牌依赖 !--java-jwt坐标--dependencygroupIdcom.auth0/groupIdartifactIdjava-jwt/artifactIdversion4.4.0/version/dependency
import com.auth0.jwt.JWT;
import com.auth0.jwt.algorithms.Algorithm;
import java.util.Date;
import java.util.Map;
public class JwtUtil {private static final String KEY CeTide;//接收业务数据,生成token并返回public static String genToken(MapString, Object claims) {return JWT.create().withClaim(claims, claims).withExpiresAt(new Date(System.currentTimeMillis() 1000 * 60 * 60 )).sign(Algorithm.HMAC256(KEY));}//接收token,验证token,并返回业务数据public static MapString, Object parseToken(String token) {return JWT.require(Algorithm.HMAC256(KEY)).build().verify(token).getClaim(claims).asMap();}}然后在登录接口这里添加代码 public ResultString login(UserLoginDTO userLoginDTO) {//先获取DTO中的账号面膜String username userLoginDTO.getUserName();String password userLoginDTO.getPassword();//先查询数据库中是否有这号人物User user userMapper.findByUsername(username);//判断是否存在if(user null){return Result.error(该用户不存在);}String salt password ceTide;String pwd DigestUtils.md5Hex(salt.getBytes()).toUpperCase();//存在判断密码是否正确if(!user.getPassword().equals(pwd)){return Result.error(用户密码错误);}
// boolean isLog logService.addUserLogin(user);
// if(!isLog){
// return Result.error(用户登录日志记录失败);
// }//登录成功MapString, Object claims new HashMap();claims.put(id, user.getId());claims.put(username, user.getUserName());String token JwtUtil.genToken(claims);//存在且密码正确return Result.success(token);}
将用户的id和username放入到token中虽然但是尽量不要把密码放进去 然后在拦截器这里进行校验 Overridepublic boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {//令牌验证System.out.println(开始验证);String token request.getHeader(Authorization);//验证令牌try{MapString,Object claims JwtUtil.parseToken(token);//放行return true;}catch (Exception e) {//反馈响应码401response.setStatus(401);return false;}}
这里如果能够解析就代表拥有JWT令牌那也就可以放行了 现在回到前端这里
先看一下修改后的前端代码
templatediv iduserCentera-layout styleheight: 100vha-layout-headera-page-header title用户中心 subtitleCeTide网 clickreturnPage/div classheaderdiv classuser-introduceimg:srcuserNum.userImgwidth70pxheight70pxclassuser-img/divdiv classpersonal-introducediv stylemargin-left: 10pxspan classname{{ userNum.userName }}/spanspan classsex-icon/span/diva-space classbtna-button typedashed shaperound clickhandleClickicon-pen-fill /编辑资料/a-buttona-button typedashed shaperoundicon-settings /设置/a-buttona-button typedashed shaperoundicon-list /文章管理/a-button/a-space/div/div/divdiv classuser-follow{{ userNum.attention }}icon-star /span classfollow-num关注/span{{ userNum.fans }}icon-heart /span classfollow-num粉丝/span{{ userNum.article }}icon-select-all /span classfollow-num文章/span/divdiv classuser-follow个人简介{{ userSelfIntroduce }}/div/div/a-layout-headera-layout stylemargin: 24px 180pxa-layout-sider :resize-directions[right]a-layoutstyleheight: 100%;text-align: left;padding-left: 20px;background-color: #c4c4c4;a-layout-content styleheight: 20%h3CeTide等级/h3/a-layout-contenta-layout-content styleheight: 20%h3个人成就/h3/a-layout-contenta-layout-content styleheight: 60%h3个人动态/h3/a-layout-content/a-layout/a-layout-sidera-layout-content classcontenth3用户中心/h3/a-layout-content/a-layouta-layout-footerFooter/a-layout-footer/a-layout!-- 编辑个人信息的抽屉 --a-drawer:visiblevisible:width500okhandleOkcancelhandleCancelunmountOnClosetemplate #title 编辑个人信息 /templatediv :style{ marginBottom: 20px }div img :srcuserNum.userImg width70px height70px classuser-img/a-button typeprimary clickhandleNestedClick stylefloat: right;margin-top: 20px更换头像/a-button/diva-divider /div 用户名a-input :style{width:320px} allow-clear v-modeluserNum.userName//diva-divider /div 性别a-input :style{width:320px} v-modelnumSex //diva-divider /div 电话a-input :style{width:320px} v-modeluserNum.phone//diva-divider /div 生日a-input :style{width:320px} v-modeluserNum.birthday //diva-divider /div 城市a-input :style{width:320px} v-modeluserNum.county //diva-divider /div 住址a-input :style{width:320px} v-modeluserNum.address //diva-divider /div CeTide网IDa-input :style{width:320px} v-modeluserNum.id disabled//diva-divider /div 个人简介 a-textarea v-modeluserSelfIntroduce allow-clear styleheight: 100px//div/div/a-drawera-drawer:visiblenestedVisibleokhandleNestedOkcancelhandleNestedCancelunmountOnClosetemplate #title 文件操作 /templatea-space directionvertical :style{ width: 100% } classpicturea-uploadaction/:fileListfile ? [file] : []:show-file-listfalsechangeonChangeprogressonProgresstemplate #upload-buttondiv:classarco-upload-list-item${file file.status error ? arco-upload-list-item-error : }divclassarco-upload-list-picture custom-upload-avatarv-iffile file.urlimg :srcfile.url /div classarco-upload-list-picture-maskIconEdit //diva-progressv-iffile.status uploading file.percent 100:percentfile.percenttypecirclesizemini:style{position: absolute,left: 50%,top: 50%,transform: translateX(-50%) translateY(-50%),}//divdiv classarco-upload-picture-card v-elsediv classarco-upload-picture-card-textIconPlus /div stylemargin-top: 10px; font-weight: 600Upload/div/div/div/div/template/a-upload/a-space/a-drawer/div
/templatescript setup
import {userGetInfo} from ../api/user;
import { ref } from vue;
import avatar from ../assets/userbg.png;
import { useRouter } from vue-router;
const router useRouter();
const userInfoList async(){let result await userGetInfo();userNum.value result.data;
}
userInfoList();
const userSelfIntroduce ref(这个人很懒什么都没有留下);
const userNum ref({id: 007,county: 四川,address: 成都,phone: 12345678910,birthday: 1999-09-09,gender: 女,email: 123qq.com,userImg: avatar,userName: 我是小丑,attention: 0,fans: 0,article: 0,
});
const numSex ref(userNum.value.gender F ? 男 : 女);
//抽屉显示隐藏
const visible ref(false);
const nestedVisible ref(false);const handleClick () {visible.value true;
};
const handleOk () {visible.value false;
};
const handleCancel () {visible.value false;
};
const handleNestedClick () {nestedVisible.value true;
};
const handleNestedOk () {nestedVisible.value false;
};
const handleNestedCancel () {nestedVisible.value false;
};//返回方法
const returnPage () {router.push(/)
}//
/scriptstyle langscss scoped
#userCenter {background: url(../assets/image.png) no-repeat bottom center / 100% 100%;
}
.header {font-family: Satisfy, cursive;margin: 2% 100px;height: 20vh;background: url(../assets/back.png) no-repeat center / 100% 100%;position: relative;
}.personal-introduce {display: flex;justify-content: center;align-items: flex-end;margin-top: 10px;text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.31);.name {line-height: 29px;font-size: 26px;}.sex-icon {display: inline-block;width: 16px;height: 16px;margin: 0px 8px;margin-bottom: 4px;background: url(../assets/user-images/sex-icon.png) no-repeat center;background-size: contain;border-radius: 50%;}.level-icon {display: inline-block;width: 16px;height: 16px;margin-bottom: 4px;background: url(../assets/user-images/leval-icon.png) no-repeat center;background-size: contain;border-radius: 50%;}
}.user-introduce {display: flex;justify-items: left;padding: 10px;
}
.user-img {border-radius: 50%;margin-left: 20px;
}
.user-follow {margin-left: 30px;font-size: 16px;display: flex;justify-items: left;
}
.follow-num {font-size: 16px;padding-right: 20px;
}
.content {margin-left: 70px;background-color: #c4c4c4;
}
.btn {position: absolute;right: 40px;
}/style
在登录之后获取到了JWT值
“eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJjbGFpbXMiOnsiaWQiOjE1LCJ1c2VybmFtZSI6IueUqOaIt1VTRERBRCJ9LCJleHAiOjE3MTY4MDQ4ODB9._9GDxuux5wmoV5CsZCd0QI3wByESKWGGZCKmDaZVlbc”
这样一大串字然后前端将其放置在请求头的Authorization属性中
举个例子
export const userGetInfo () {return request.get(/user/getInfo,{headers : {Authorization : eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJjbGFpbXMiOnsiaWQiOjE1LCJ1c2VybmFtZSI6IueUqOaIt1VTRERBRCJ9LCJleHAiOjE3MTY4MDQ4ODB9._9GDxuux5wmoV5CsZCd0QI3wByESKWGGZCKmDaZVlbc,}});}此时访问页面就能得到用户名等信息了 然后就算是成功实现了请求的拦截与用户身份的检验
