通过Spring Security登录到VueJS应用程序

我正在构建一个带有Spring后端和VueJS前端的webapp。 我试图通过Spring Security保护我的应用程序，但我注意到了一些主要问题。 首先，我尝试使用标准的spring安全登录机制保护应用程序，但这是因为vue应用程序运行在与我的spring应用程序不同的端口上

.authorizeRequests()
                .antMatchers("/","/css/**","/login.html","/register.html","/index.html")
                .permitAll().and().authorizeRequests().antMatchers("/console/**").permitAll()
                .antMatchers("/application.html","**localhost:8080**").hasAnyRole("USER","ADMIN")
                .antMatchers("/admin_application.html").hasAnyRole("ADMIN")
                [...]

tomcat没有监听vue端口（本例中为：8080），因此它无法查看是否有人正在该端口上连接

我还研究了JWT和OAuth，但是由于我的时间预算很紧，所以它对我来说太难实现了

是否有可能使用弹簧安全机制来固定前端？如果是这样的话，你有什么我可以参考的资源吗

---

亲切问候

我将转发URI设置为在Spring中创建并附加的html文档

<meta http-equiv="refresh" content="0; url=http://localhost:8080/" />

这样我就可以从我的spring安全登录表单中获得一个到我的vue应用程序的链接

---

只需通过nginx（大约）关闭我的Vue端口，然后我就可以开始了：）

必须在Vue中重新实现这一点

使用vue登录，根据我的spring安全性进行身份验证，并在vuex存储中设置存储变量

router.js：

beforeEnter: (to, from, next) => {
                if (store.state.loggedIn == false) {
                    next(false);
                } else {
                    next();
                }
            }

main.js：

    mutations: {
        loginSuccess(state){
        state.loggedIn = true
        },

    logoutSuccess(state){
        state.loggedIn = false
    }

登录方法

    methods: {
        performLogin() {
            let formData = new FormData();
            formData.set("username", this.username);
            formData.set("password", this.password);
            Axios.post('http://localhost:8181/perform_login', formData,{headers: {'Content-Type': 'application/x-www-form-urlencoded'}})
             .then((result) => {
             this.$store.commit('loginSuccess')
             window.location = '#/dashboard'
             })
             .catch((error) => {
             console.error(error)
             })
        },

愿这对你们中的一个有所帮助