页面刷新后Axios侦听器不工作（Vue.js）

我正在开发一个简单的crud应用程序，它是用spring、vue.js和h2数据库开发的

我几乎完成了，但不幸的是，我在身份验证方面遇到了一些问题。当我键入所有必需的凭据时，登录将成功，并且我将被重定向到一个包含用餐表的页面，该页面显示来自API的数据

当我单击其他页面时，控制台突然显示一条错误消息： [1] :

过了一会儿，我将所有的“href”替换为“to”。最后，通过web应用程序的导航工作正常，而且对数据的访问也没有被拒绝。不幸的是，页面刷新后，访问被拒绝，我再次收到上述错误消息

我已经检查了浏览器中的会话存储，如果我的用户帐户在页面刷新后仍然保存，情况就是这样

我不知道确切的错误是什么

我感谢你的帮助：）

后端：

SpringSecurityConfigurationAuthentication.java

AuthenticationBeanController.java

前端Vue.js：

http-common.js：

AuthenticationService.js

MealDataService.js

潜在客户： 由于您的应用程序是单页客户端应用程序，没有正确的服务器配置，因此如果用户直接在浏览器中（或通过刷新）访问除home之外的任何其他路由，则会出现错误（如果未找到，则为404，如果受保护，则为身份验证错误）

查看您的web服务器配置，看看是否有任何配置可以处理此行为

@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");

    }
}

@RestController
@RequestMapping(value="/basicauth")
@CrossOrigin(origins = "*", allowedHeaders = "*")
public class AuthenticationBeanController {


    @GetMapping
    public AuthenticationBean authenticating() {
       return new AuthenticationBean("You are authenticated");
    }

}

import axios from 'axios'

    export default axios.create({
        baseURL: "http://localhost:8080",
        headers: {
            "Content-type": "application/json",
        }
    })

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();

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();