67 lines
2.1 KiB
Vue
67 lines
2.1 KiB
Vue
|
<template>
|
||
|
<div>
|
||
|
<div class="notification is-danger" v-if="errorMessage">
|
||
|
{{ errorMessage }}
|
||
|
</div>
|
||
|
<div class="notification is-info" v-if="loading">
|
||
|
Authenticating...
|
||
|
</div>
|
||
|
</div>
|
||
|
</template>
|
||
|
|
||
|
<script>
|
||
|
import {mapState} from 'vuex'
|
||
|
|
||
|
import {ERROR_MESSAGE, LOADING} from '@/store/mutation-types'
|
||
|
|
||
|
export default {
|
||
|
name: 'Auth',
|
||
|
computed: mapState({
|
||
|
errorMessage: ERROR_MESSAGE,
|
||
|
loading: LOADING,
|
||
|
}),
|
||
|
mounted() {
|
||
|
this.authenticateWithCode()
|
||
|
},
|
||
|
methods: {
|
||
|
authenticateWithCode() {
|
||
|
// This component gets mounted twice: The first time when the actual auth request hits the frontend,
|
||
|
// the second time after that auth request succeeded and the outer component "content-no-auth" isn't used
|
||
|
// but instead the "content-auth" component is used. Because this component is just a route and thus
|
||
|
// gets mounted as part of a <router-view/> which both the content-auth and content-no-auth components have,
|
||
|
// this re-mounts the component, even if the user is already authenticated.
|
||
|
// To make sure we only try to authenticate the user once, we set this "authenticating" lock in localStorage
|
||
|
// which ensures only one auth request is done at a time. We don't simply check if the user is already
|
||
|
// authenticated to not prevent the whole authentication if some user is already logged in.
|
||
|
if (localStorage.getItem('authenticating')) {
|
||
|
return
|
||
|
}
|
||
|
localStorage.setItem('authenticating', true)
|
||
|
|
||
|
const state = localStorage.getItem('state')
|
||
|
if(typeof this.$route.query.state === 'undefined' || this.$route.query.state !== state) {
|
||
|
localStorage.removeItem('authenticating')
|
||
|
this.$store.commit(ERROR_MESSAGE, 'State does not match, refusing to continue!')
|
||
|
return
|
||
|
}
|
||
|
|
||
|
this.$store.commit(ERROR_MESSAGE, '')
|
||
|
|
||
|
this.$store.dispatch('auth/openIdAuth', {
|
||
|
provider: this.$route.params.provider,
|
||
|
code: this.$route.query.code,
|
||
|
})
|
||
|
.then(() => {
|
||
|
this.$router.push({name: 'home'})
|
||
|
})
|
||
|
.catch(() => {
|
||
|
// Handled through global state
|
||
|
})
|
||
|
.finally(() => {
|
||
|
localStorage.removeItem('authenticating')
|
||
|
})
|
||
|
},
|
||
|
},
|
||
|
}
|
||
|
</script>
|