How to redirect to a VUE template using Spring Rest Controller? - spring

Question

I have this REST controller for my app based on Vue.js:
#CrossOrigin(origins = ["*"], maxAge = 3600)
#RestController
#RequestMapping
class AuthController {
#Autowired
lateinit var authenticationManager: AuthenticationManager
#Autowired
lateinit var userRepository: UserRepository
#Autowired
lateinit var encoder: PasswordEncoder
#Autowired
lateinit var jwtProvider: JwtProvider
#PostMapping("/login")
fun authenticateUser(#Valid #RequestBody loginRequest: LoginUser): ResponseEntity<*> {
val userCandidate: Optional<User> = userRepository.findByUsername(loginRequest.username!!)
if (userCandidate.isPresent) {
val user: User = userCandidate.get()
val authentication = authenticationManager.authenticate(
UsernamePasswordAuthenticationToken(loginRequest.username, loginRequest.password))
SecurityContextHolder.getContext().setAuthentication(authentication)
val jwt: String = jwtProvider.generateJwtToken(user.username!!)
val authorities: Set<GrantedAuthority> = user.roles!!.stream().map({ role -> SimpleGrantedAuthority(role.name) }).collect(Collectors.toSet<GrantedAuthority>())
return ResponseEntity.ok(JwtResponse(jwt, user.username, authorities))
} else {
return ResponseEntity(ResponseMessage("User not found!"),
HttpStatus.BAD_REQUEST)
}
}
}
Here is my Login.vue page:
<template>
<div div="login">
<div class="login-form">
<b-card
title="Login"
tag="article"
style="max-width: 20rem;"
class="mb-2"
>
<div>
<b-alert
:show="dismissCountDown"
dismissible
variant="danger"
#dismissed="dismissCountDown=0"
#dismiss-count-down="countDownChanged"
> {{ alertMessage }}
</b-alert>
</div>
<div>
<b-form-input type="text" placeholder="Username" v-model="username"/>
<div class="mt-2"></div>
<b-form-input type="password" placeholder="Password" v-model="password"/>
<div class="mt-2"></div>
</div>
<b-button v-on:click="login" variant="primary">Login</b-button>
<hr class="my-4"/>
<b-button variant="link">Forget password?</b-button>
</b-card>
</div>
</div>
</template>
<script>
import {AXIOS} from './http-common'
export default {
name: 'SignIn',
data() {
return {
username: '',
password: '',
dismissSecs: 5,
dismissCountDown: 0,
alertMessage: 'Request error'
}
},
methods: {
login() {
AXIOS.post(`/login`, {'username': this.$data.username, 'password': this.$data.password})
.then(response => {
this.$store.dispatch('login', {
'token': response.data.accessToken,
'roles': response.data.authorities,
'username': response.data.username
});
this.$router.push('/home')
}, error => {
this.$data.alertMessage = (error.response.data.message.length < 150) ? error.response.data.message : 'Request error. Please, report this error website owners';
console.log(error)
})
.catch(e => {
console.log(e);
this.showAlert();
})
},
countDownChanged(dismissCountDown) {
this.dismissCountDown = dismissCountDown
},
showAlert() {
this.dismissCountDown = this.dismissSecs
}
}
}
</script>
<style>
.login-form {
margin-left: 38%;
margin-top: 50px;
}
</style>
Here are my router.js settings:
import Vue from 'vue'
import Router from 'vue-router'
import Home from '#/components/Home'
import SignIn from '#/components/SignIn'
import SignUp from '#/components/SignUp'
import Invites from '#/components/Invites'
import UserPage from '#/components/UserPage'
Vue.use(Router)
export default new Router({
mode: 'history',
routes: [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/home',
name: 'Home',
component: Home
},
{
path: '/login',
name: 'SignIn',
component: SignIn
},
{
path: '/registration',
name: 'SignUp',
component: SignUp
},
{
path: '/user',
name: 'UserPage',
component: UserPage
},
{
path: '/invites',
name: 'Invites',
component: Invites
}
]
})
And here is my App.vue main module:
<template>
<div id="app">
<b-navbar style="width: 100%" type="dark" variant="dark">
<b-navbar-brand id="nav-brand" href="#">Interval words repeating service</b-navbar-brand>
<router-link to="/"><img height="30px" src="./assets/img/kotlin-logo.png" alt="Kotlin+Spring+Vue"/></router-link>
<router-link to="/"><img height="30px" src="./assets/img/spring-boot-logo.png" alt="Kotlin+Spring+Vue"/></router-link>
<router-link to="/"><img height="30px" src="./assets/img/vuejs-logo.png" alt="Kotlin+Spring+Vue"/></router-link>
<router-link to="/home" class="nav-link text-light" v-if="this.$store.getters.isAuthenticated">Words for today</router-link>
<router-link to="/vocabulary" class="nav-link text-light" v-if="this.$store.getters.isAuthenticated">My vocabulary</router-link>
<router-link to="/trash" class="nav-link text-light" v-if="this.$store.getters.isAuthenticated">My trash</router-link>
<router-link to="/invites" class="nav-link text-light" v-if="this.$store.getters.isAdmin">Add new invite</router-link>
<router-link to="/registration" class="nav-link text-light" v-if="!this.$store.getters.isAuthenticated">Registration</router-link>
<router-link to="/login" class="nav-link text-light" v-if="!this.$store.getters.isAuthenticated">Login</router-link>
Logout
</b-navbar>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'app',
methods: {
logout() {
this.$store.dispatch('logout');
this.$router.push('/')
}
}
}
</script>
<style>
</style>
I can see my "login" page after going to localhost:8080/login. But, as I'm refreshing the page, I'm getting error with the message "get method is not supported".
How to fix it and get viewing this page after sending "get" request to the "/login" url?