introduction
From July to August in recent years, I published several practical articles on spring boot integrating Vue element admin project to realize user-defined permission control, which were praised by many readers. Later, I didn't pay attention to maintenance, but recently, a fan or a college teacher on CSDN suddenly left a message to me that the project was built according to my article ideas, and the functions of user-defined menu and role authorization were also realized. However, a very serious bug was found, that is, the logout is invalid, and the system will not be transferred to the login interface after logout, and clicking on other pages is also blank.
Figure 1. Project exit login failure bug fed back by readers
According to the reader's feedback, this problem bothered him for a week and couldn't be solved, so he had to leave a message and ask me for help. In order to help fans solve problems, I was also improving my ideas, so I restarted the project and opened the debugging road of the project I had put aside for a long time. At the same time, I also referred to the previous Luban mall front and rear end separation project. It took me one night to finally solve the problem. At this moment, I found a lost sense of achievement! The official account has not been updated for a long time, and the specific implementation of the custom logout is also solved by separating the front end from the front end and using spring-security as the security framework.
Find the implementation logic of the front-end exit login button and locate the problem
First, we have to find the code that implements the exit login button, which is in Src / layout / components / navbar. Exe of the Vue element admin project In the logout method in the Vue file.
"Logic before modification"
async logout() {
await this.$store.dispatch('user/logout')
this.$router.push('/login')
}
Then we according to this$ store. The code of dispatch ('user / logout ') finds Src / store / user In the logout behavior method in actions in JS file, it is found that the original exit login logic calls the background exit login interface, but does not follow the background exit login logic.
logout({ commit, state, dispatch }) {
return new Promise((resolve, reject) => {
logout(state.token).then(() => {
commit('SET_TOKEN', '')
commit('SET_ROLES', [])
commit('SET_NAME', '')
commit('SET_CURRENT_ROLE', null)
window.sessionStorage.removeItem('userInfo')
window.sessionStorage.removeItem('routeIds')
window.sessionStorage.removeItem('roles')
window.sessionStorage.removeItem('currentRole')
removeToken()
resetRouter()
// reset visited views and cached views
// to fixed https://github.com/PanJiaChen/vue-element-admin/issues/2485
dispatch('tagsView/delAllViews', null, { root: true })
resolve()
}).catch(error => {
reject(error)
})
})
}
Every time the exit login function is debugged at the front end, a cross domain failure as shown below will be reported in the browser console, resulting in that the interaction cannot reach the background exit login interface at all
Figure 2 the browser console reports a cross domain failure when the front end logs out
Obviously, I have configured cross domain in the spring security configuration class on the back end. In this front end and back-end separated project, the login function is also cross domain. There is no problem at all. Why do I report such cross domain problems when I log out? This involves modifying the code in the spring security adapter class in the background
Disable the exit login of the framework in the background spring security adapter class
Fortunately, after referring to the source code of the spring security configuration class in the company I currently work for, I found that the exit login provided by the disable framework in the spring security configuration class is required.
WebSecurityConfig.java
The spring security adapter class is located in the src/main/java/org/sang/config directory of my blogserver project
@Override
protected void configure(HttpSecurity http) throws Exception {
// Configure cross domain
http.cors().configurationSource(corsConfigurationSource());
// Disable logout of spring security framework and use custom logout
http.logout().disable();
// Other codes are omitted
}
In order to verify the logic of login and logout, we log the login and logout methods respectively
UserService.java
This class is located in the src/main/java/org/sang/service directory of my blogserver project
Figure 3 failure logic code of user login service in background project
UserController.java
This class is located in the src/main/java/org/sang/controller directory of my blogserver project
Figure 4 business logic code of user-defined user exit and login in background project
Calling Util. from the logon method The clearcontext () method will clear the authentication information of the current user in the application context
Modify the front-end exit login logic
After the back-end disables the exit login of the spring security framework, we start to modify the front-end exit login logic
First, we use Src / API / user in the front-end Vue element admin project A login exit interface is exposed in the JS file
export function logout() {
return request({
url: '/user/logout',
method: 'post'
})
}
Then in Src / store / user The JS file imports the logout interface and invokes the interface in the exit logon behavior method.
import { login, logout } from '@/api/user'
// The middle part of the code is omitted. Readers who need to view the complete code can go to the code warehouse to view it
const actions = {
// Login ({commit}, userinfo) omitted
logout({ commit, state, dispatch }) {
return new Promise((resolve, reject) => {
logout().then(res => {
if (res.status === 200) {
commit('SET_TOKEN', '')
commit('SET_ROLES', [])
commit('SET_NAME', '')
commit('SET_CURRENT_ROLE', null)
window.sessionStorage.removeItem('userInfo')
window.sessionStorage.removeItem('routeIds')
window.sessionStorage.removeItem('roles')
window.sessionStorage.removeItem('currentRole')
removeToken()
resetRouter()
// reset visited views and cached views
// to fixed https://github.com/PanJiaChen/vue-element-admin/issues/2485
dispatch('tagsView/delAllViews', null, { root: true })
Message.info('Log out successfully')
// The following resolve method must be called. Otherwise, the login callback method will exit in the Navbar component to route and jump to the login page
resolve()
} else {
reject('Failed to log out')
}
})
})
}
}
After the back-end exits and logs in successfully, we also need to clear the user's cache information in the front-end cookie s and session s.
Finally, we'll be in navbar Call this. In the Vue file$ store. The successful callback method of the dispatch ('user / logout ') method refreshes the current document and allows the current route to re-enter the login interface. The code implementation logic is as follows:
logout() {
this.$store.dispatch('user/logout').then(res => {
console.log(res)
// Refresh current document
location.reload()
this.$router.push({ path: '/login' })
})
}
The above logic and the login exit logic of the original author of the Vue element Vue project have been slightly modified. Here, I changed the asynchronous method to the synchronous method, and implemented the logic of refreshing the current document and re entering the login interface in the callback function after successful login exit
Test the modified effect
After modifying the front and back-end code, we can start the front and back-end projects to test and verify the effect!
After we log in successfully, we enter the main page of the project:
Figure 5 user login successfully enters the main page
Then we click the small triangle with the user icon in the upper right corner. After clicking the Log Out button in the pop-up drop-down box, the page will pop up the message "Log Out succeeded". After prompting, the current page will enter the login interface. At the same time, the log of "Log Out" is also printed in the background
Figure 6 after exiting the login, the current page enters the login interface
Log information printed by the background console during user login and logout
2021-12-11 11:46:30.641 INFO 8496 --- [nio-8081-exec-1] org.sang.service.UserService : User login authentication, username=heshengfu 2021-12-11 11:46:31.143 INFO 8496 --- [nio-8081-exec-3] o.s.controller.RouterResourceController : roleId=1 2021-12-11 11:46:31.241 INFO 8496 --- [nio-8081-exec-4] o.s.controller.RouterResourceController : roleId=1 2021-12-11 11:51:33.276 INFO 8496 --- [nio-8081-exec-9] org.sang.controller.UserController : Log out
Write at the end
Well, the custom logout bug has been solved. I have to say here that I have not unlocked many functions in spring security, and my previous learning is just a door, which is far from being proficient. However, on the premise that the problem has been solved and delivery is the first priority, when we step into the pit of spring security, we'd better refer to the following open source projects that use spring security as the security control module in the project and have relatively mature technology, and refer to how Daniel in the industry uses spring security to realize various customized functions. In this way, we will get twice the result with half the effort in solving the bugs encountered in the project.
Finally, the address of the front and rear project code warehouse of this article is attached. Readers who need to view the complete implementation of the project can clone the source code and study it by themselves. The code after modifying the log out invalid Bug has also been submitted to my personal gitee code warehouse.
Back end project blogserver gitee address: https://gitee.com/heshengfu1211/blogserver.git Front end Vue element admin project gitee address: https://gitee.com/heshengfu1211/vue-element-admin.git