Axios Interceptor is not working after page refresh (Vue.js) - vue.js

Question

I am working on a simple crud-application, which is developed with spring,vue.js and h2 database.
I am almost done but unfortunately, I have some problems with the authentication. When I type all required credentials, the login will succeed and I will be redirected to page with a meal table, which displays the data from an API.
When I click on other pages, suddenly the console shows me an error message:
[1]: https://i.stack.imgur.com/zQBw0.png
After a while, I have replaced all "href" to "to". Finally, the navigation through the web application worked and also the access to the data was not denied. Unfortunately, after a page refresh, the access was denied and I received the above error message again.
I have checked the session storage in the Browser if my user account is still saved after a page refresh and this was the case.
I don't know, what the exact error is.
I appreciate your help :)
Backend:
SpringSecurityConfigurationAuthentication.java
#Configuration
#EnableWebSecurity
#EnableGlobalMethodSecurity(prePostEnabled = true, securedEnabled = true, jsr250Enabled = true)
public class SpringSecurityConfigurationAuthentication extends WebSecurityConfigurerAdapter {
#Override
public void configure(WebSecurity web) throws Exception {
super.configure(web);
}
#Override
protected void configure(HttpSecurity http) throws Exception {
http
.csrf().disable()
.authorizeRequests()
.antMatchers(HttpMethod.OPTIONS, "/**").permitAll()
.anyRequest().authenticated()
.and()
//.formLogin().and()
.httpBasic();
}
#Autowired
public void configureGlobal(AuthenticationManagerBuilder authenticationManagerBuilder) throws Exception {
authenticationManagerBuilder.inMemoryAuthentication()
.withUser("admin")
.password("{noop}admin")
.roles("ADMIN")
.and()
.withUser("user")
.password("{noop}user")
.roles("USER");
}
}
AuthenticationBeanController.java
#RestController
#RequestMapping(value="/basicauth")
#CrossOrigin(origins = "*", allowedHeaders = "*")
public class AuthenticationBeanController {
#GetMapping
public AuthenticationBean authenticating() {
return new AuthenticationBean("You are authenticated");
}
}
Frontend Vue.js :
http-common.js:
import axios from 'axios'
export default axios.create({
baseURL: "http://localhost:8080",
headers: {
"Content-type": "application/json",
}
})
AuthenticationService.js
import http from '../http-common'
class AuthenticationService {
registerSuccesfulLogin(username, password) {
this.setupAxiosInterceptors(this.createBasicAuthToken(username, password))
}
startAuthentication(username, password) {
return http.get('/basicauth', {headers: {authorization: this.createBasicAuthToken(username, password)}});
}
createBasicAuthToken(username, password) {
let userToken = 'Basic ' + window.btoa(username + ":" + password);
sessionStorage.setItem('authenticatedUser', username)
return userToken
}
logout() {
sessionStorage.removeItem('authenticatedUser');
}
isUserLoggedIn() {
let user = sessionStorage.getItem('authenticatedUser');
if (user === null) return false
return true
}
setupAxiosInterceptors(userToken) {
http.interceptors.request.use(
(config) => {
if (this.isUserLoggedIn()) {
config.headers.Authorization = userToken
}
return config
}
)
}
}
export default new AuthenticationService();
MealDataService.js
import http from '../http-common'
class MealDataService {
retrieveAllMeals() {
return http.get('/meal');
}
deleteMealById(id) {
return http.delete(`/meal/${id}`);
}
getMealById(id) {
return http.get(`/meal/${id}`);
}
updateMealById(data) {
return http.put('/meal', data);
}
addMealById(data) {
return http.post('/meal', data);
}
}
export default new MealDataService();

Answer 1

Possible lead :
Since your app is a single page client side app, without a proper server configuration, the users will get an error (404 if not found or authentication error if protected) if they access any other route different than home directly in their browser (or by refreshing).
Look at your web server configuration and see if there is any configuration to handle this behavior HTML5 history mode.