Loggin in to VueJS App via Spring Security - spring

Question

I am building a webapp with a Spring Backend and a VueJS frontend.
I am trying to secure my app via Spring Security but i noticed some major problems.
First I tried to secure the app with the standard spring security login mechanism but due to the fact that the vue app runns on a different port than my spring app
.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")
[...]
the tomcat is not listening on the vue port (:8080 in this case) so it just can't see if someone is connecting on this port.
I also looked at JWT and OAuth but due to the fact that i have a tight time budget it was too much to implement for me.
Is there a possible way to use the Spring Security mechanism for securing the frontend? If so, do you have any resource I can possible look at?
Kind regards

Answer 1

I setted the forwarding URI to a html document I created in my Spring and attached
<meta http-equiv="refresh" content="0; url=http://localhost:8080/" />
to it so I have a link to my vue app from my spring security login form.
Just have to close my Vue port via nginx (or so) and then i should be good to go :)

Answer 2

Had to reimplement this in vue,
doing login with vue, authenticating against my spring security and setting a store variable in vuex store
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
}
Login method
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)
})
},
may this helps one of you!