Brothers, following yesterday’s code, continue to complete the final user module development,
Yesterday I completed the user information editing page. I will improve it today.
Let’s start from the backend. Make an interceptor to verify the user’s identity.
Interceptor
Let me explain it first:
Let’s use the interview questions to elaborate:
**Interceptor related interview questions: What is the difference between filters and interceptors? **
answer:
- 1: The order of operation is different
-
The filter is run after the servlet container receives the request and before the servlet is called.
-
The interceptor runs after the servlet is called, but before the response is sent to the client.
-
-
Two: Different configuration methods
-
The filter is configured in web.xml
-
The interceptor is configured in the spring configuration file or based on annotations.
- Three: Dependencies
- Filter depends on the Servlet container, while Interceptor does not depend on the Servlet container
-
Four: Ability
-
Filter can only operate on request and response in the filter.
-
Interceptor can handle request, response, handler, modelAndView, and exception, which is equivalent to Interceptor having the ability to operate components in the SpringMvc ecosystem.
- Different interface specifications
- Filters need to implement the Filter interface, and interceptors need to implement the HandlerInterceptor interface.
- The interception range is different
- Filter Filter will intercept all resources, while Interceptor will only intercept resources in the Spring environment
OK, let’s make an interceptor:
Create an interceptors package and create the LoginInterceptor class
The class of the interceptor must be inherited
HandlerInterceptor
Note:
First, when creating an interceptor class, you need to implement the
HandlerInterceptorinterface. This interface defines three methods:preHandle(),postHandle()andafterCompletion(). ThepreHandle()method is called before the controller method is executed. It returns a Boolean value indicating whether to continue to perform subsequent operations; thepostHandle()method is called after the controller method is executed and before the view is parsed. You can Used to further process the response; theafterCompletion()method is called after the entire request is processed and is usually used for resource cleanup.Secondly, in addition to implementing the
HandlerInterceptorinterface, you can also choose to inherit theHandlerInterceptorAdapterclass to simplify the implementation of the interceptor.HandlerInterceptorAdapterprovides an empty implementation of theHandlerInterceptorinterface, so that developers only need to rewrite the methods they care about.Finally, in order for the interceptor to take effect, corresponding configuration needs to be made in the Spring configuration file. This usually involves defining a configuration class, implementing the
WebMvcConfigurerinterface, and overriding theaddInterceptors()method. In this method, you can useaddPathPatterns()to specify interception paths andexcludePathPatterns()to specify excluded paths.In actual development, it is very important to choose the appropriate interceptor type according to your needs. For example, if you need to perform permission verification at the Controller layer, then it is appropriate to use the
HandlerInterceptorinterface; if you only need to perform simple preprocessing and post-processing of the request, you can consider using theWebRequestInterceptorinterface. Choosing the right interceptor type ensures clean and maintainable code.
The code is given below
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 {
@Override
public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
return false;
}
@Override
public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler, ModelAndView modelAndView) throws Exception {
HandlerInterceptor.super.postHandle(request, response, handler, modelAndView);
}
@Override
public void afterCompletion(HttpServletRequest request, HttpServletResponse response, Object handler, Exception ex) throws Exception {
HandlerInterceptor.super.afterCompletion(request, response, handler, ex);
}
}
Here, after inheriting HandlerInterceptor, press the shortcut key Ctrl+o, and then inherit three methods. The first type of preHandle is commonly used here. It will be intercepted and processed by preHandle before the request is sent to the Controller layer. If the return is not true, it will be Interception.
After creating the interceptor, you need to register the interceptor.
Here we operate under the config package created before.
Add code under the class that previously loaded Swagger resources:
@Configuration
public class WebConfiguration extends WebMvcConfigurationSupport {
@Autowired
private LoginInterceptor loginInterceptor;
@Override
public void addInterceptors(InterceptorRegistry registry) {
//The login interface and registration interface are not intercepted
registry.addInterceptor(loginInterceptor).addPathPatterns("/**").excludePathPatterns("/user/login","/user/register","/doc.html#/home");
}
There is a small pit here (I previously created a separate class to inherit WebMvcConfigurer, but the interceptor did not work. If so, inherit WebMvcConfigueationSupport)
After adding the intercepted path and the released path, you can check it.
OK, after using the interceptor here, the login interface can be used normally.
Using the update interface returns 401 No Permission. That would be successful.
JWT token:
So after using the interceptor, it intercepts other interfaces except login and registration. How can it be used? Identity verification is necessary. JWT tokens can be used here.
That is, after the user logs in, a JWT token is issued and then fed back to the front end. The front end carries it to the back end, and the interceptor verifies it. If it contains a JWT token, it is released.
Introducing JWT token dependency on the backend
<!--java-jwtcoordinate-->
<dependency>
<groupId>com.auth0</groupId>
<artifactId>java-jwt</artifactId>
<version>4.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";
//Receive business data,generatetokenand return
public static String genToken(Map<String, Object> claims) {
return JWT.create()
.withClaim("claims", claims)
.withExpiresAt(new Date(System.currentTimeMillis() + 1000 * 60 * 60 ))
.sign(Algorithm.HMAC256(KEY));
}
//take overtoken,verifytoken,and return business data
public static Map<String, Object> parseToken(String token) {
return JWT.require(Algorithm.HMAC256(KEY))
.build()
.verify(token)
.getClaim("claims")
.asMap();
}
}
Then add code here in the login interface:
public Result<String> login(UserLoginDTO userLoginDTO) {
//Get firstDTOAccount mask in
String username = userLoginDTO.getUserName();
String password = userLoginDTO.getPassword();
//First check whether there is this person in the database
User user = userMapper.findByUsername(username);
//Determine whether it exists
if(user == null){
return Result.error("this user does not exist");
}
String salt = password + "ceTide";
String pwd = DigestUtils.md5Hex(salt.getBytes()).toUpperCase();
//exist，Determine whether the password is correct
if(!user.getPassword().equals(pwd)){
return Result.error("Wrong user password");
}
// boolean isLog = logService.addUserLogin(user);
// if(!isLog){
// return Result.error("User login logging failed");
// }
//login successful
Map<String, Object> claims = new HashMap<>();
claims.put("id", user.getId());
claims.put("username", user.getUserName());
String token = JwtUtil.genToken(claims);
//Exists and the password is correct
return Result.success(token);
}
Put the user's id and username into the token (although, try not to put the password in)
Then perform verification here in the interceptor:
@Override
public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
//Token verification
System.out.println("Start verification");
String token = request.getHeader("Authorization");
//Verification token
try{
Map<String,Object> claims = JwtUtil.parseToken(token);
//release
return true;
}catch (Exception e) {
//Feedback response code401
response.setStatus(401);
return false;
}
}
If it can be parsed here, it means that you have a JWT token, and it can be released.
Now back to the front end:
Let’s take a look at the modified front-end code first
<template>
<div id="userCenter">
<a-layout style="height: 100vh">
<a-layout-header>
<a-page-header title="User Center" subtitle="CeTidenet" @click="returnPage"/>
<div class="header">
<div class="user-introduce">
<img
:src="userNum.userImg"
width="70px"
height="70px"
class="user-img"
/>
<div>
<div class="personal-introduce">
<div style="margin-left: 10px">
<span class="name">{{ userNum.userName }}</span>
<span class="sex-icon"></span>
</div>
<a-space class="btn">
<a-button type="dashed" shape="round" @click="handleClick"
><icon-pen-fill />edit information</a-button
>
<a-button type="dashed" shape="round"
><icon-settings />set up</a-button
>
<a-button type="dashed" shape="round"
><icon-list />Article management</a-button
>
</a-space>
</div>
</div>
</div>
<div class="user-follow">
{{ userNum.attention }}
<icon-star />
<span class="follow-num">focus on</span>
{{ userNum.fans }}
<icon-heart />
<span class="follow-num">fan</span>
{{ userNum.article }}
<icon-select-all />
<span class="follow-num">article</span>
</div>
<div class="user-follow">Personal profile：{{ userSelfIntroduce }}</div>
</div>
</a-layout-header>
<a-layout style="margin: 24px 180px">
<a-layout-sider :resize-directions="['right']">
<a-layout
style="
height: 100%;
text-align: left;
padding-left: 20px;
background-color: #c4c4c4;
"
>
<a-layout-content style="height: 20%">
<h3>CeTidegrade</h3>
</a-layout-content>
<a-layout-content style="height: 20%">
<h3>Personal achievements</h3>
</a-layout-content>
<a-layout-content style="height: 60%">
<h3>Personal updates</h3>
</a-layout-content>
</a-layout>
</a-layout-sider>
<a-layout-content class="content">
<h3>User Center</h3>
</a-layout-content>
</a-layout>
<a-layout-footer>Footer</a-layout-footer>
</a-layout>
<!-- Edit personal information drawer -->
<a-drawer
:visible="visible"
:width="500"
@ok="handleOk"
@cancel="handleCancel"
unmountOnClose
>
<template #title> Edit personal information </template>
<div :style="{ marginBottom: '20px' }">
<div >
<img :src="userNum.userImg" width="70px" height="70px" class="user-img"/>
<a-button type="primary" @click="handleNestedClick" style="float: right;margin-top: 20px"
>Change avatar</a-button
>
</div>
<a-divider />
<div> username：<a-input :style="{width:'320px'}" allow-clear v-model="userNum.userName"/></div>
<a-divider />
<div> gender：<a-input :style="{width:'320px'}" v-model="numSex" /></div>
<a-divider />
<div> Telephone：<a-input :style="{width:'320px'}" v-model="userNum.phone"/></div>
<a-divider />
<div> Birthday：<a-input :style="{width:'320px'}" v-model="userNum.birthday" /></div>
<a-divider />
<div> City：<a-input :style="{width:'320px'}" v-model="userNum.county" /></div>
<a-divider />
<div> address：<a-input :style="{width:'320px'}" v-model="userNum.address" /></div>
<a-divider />
<div> CeTidenetID：<a-input :style="{width:'320px'}" v-model="userNum.id" disabled/></div>
<a-divider />
<div> Personal profile： <a-textarea v-model="userSelfIntroduce" allow-clear style="height: 100px"/></div>
</div>
</a-drawer>
<a-drawer
:visible="nestedVisible"
@ok="handleNestedOk"
@cancel="handleNestedCancel"
unmountOnClose
>
<template #title> File operations </template>
<a-space direction="vertical" :style="{ width: '100%' }" class="picture">
<a-upload
action="/"
:fileList="file ? [file] : []"
:show-file-list="false"
@change="onChange"
@progress="onProgress"
>
<template #upload-button>
<div
:class="`arco-upload-list-item${
file && file.status === 'error' ? ' arco-upload-list-item-error' : ''
}`"
>
<div
class="arco-upload-list-picture custom-upload-avatar"
v-if="file && file.url"
>
<img :src="file.url" />
<div class="arco-upload-list-picture-mask">
<IconEdit />
</div>
<a-progress
v-if="file.status === 'uploading' && file.percent < 100"
:percent="file.percent"
type="circle"
size="mini"
:style="{
position: 'absolute',
left: '50%',
top: '50%',
transform: 'translateX(-50%) translateY(-50%)',
}"
/>
</div>
<div class="arco-upload-picture-card" v-else>
<div class="arco-upload-picture-card-text">
<IconPlus />
<div style="margin-top: 10px; font-weight: 600">Upload</div>
</div>
</div>
</div>
</template>
</a-upload>
</a-space>
</a-drawer>
</div>
</template>
<script 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("This person is lazy，nothing left");
const userNum = ref({
id: "007",
county: "Sichuan",
address: "Chengdu",
phone: "12345678910",
birthday: "1999-09-09",
gender: "female",
email: "123@qq.com",
userImg: avatar,
userName: "I'm a clown",
attention: 0,
fans: 0,
article: 0,
});
const numSex = ref(userNum.value.gender === 'F' ? 'male' : 'female');
//Drawer show hide
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;
};
//Return method
const returnPage = () =>{
router.push('/')
}
//
</script>
<style lang="scss" 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>
After logging in, the JWT value was obtained
“eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJjbGFpbXMiOnsiaWQiOjE1LCJ1c2VybmFtZSI6IueUqOaIt1VTRERBRCJ9LCJleHAiOjE3MTY4MDQ4ODB9._9GDxuux5wmoV5CsZCd0QI3wByESKWGGZCKmDaZVlbc”
Such a large string of words, and then the front end places it in the Authorization attribute of the request header
for example
export const userGetInfo= () =>{
return request.get('/user/getInfo',{
headers : {
'Authorization' : 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJjbGFpbXMiOnsiaWQiOjE1LCJ1c2VybmFtZSI6IueUqOaIt1VTRERBRCJ9LCJleHAiOjE3MTY4MDQ4ODB9._9GDxuux5wmoV5CsZCd0QI3wByESKWGGZCKmDaZVlbc',
}
});
}
When you visit the page at this time, you can get the user name and other information.
Then even if the request interception and user identity verification are successfully implemented,
