Add authentication followup to front-end to ease navigation & redirects

This commit is contained in:
Bubka 2023-08-04 15:13:30 +02:00
parent afd020019b
commit a80a002ce7
5 changed files with 26 additions and 6 deletions

6
resources/js/api.js vendored
View File

@ -13,6 +13,12 @@ if (window.appConfig.subdirectory) {
}
Vue.axios.interceptors.response.use(response => response, error => {
// Whether or not the promise must be returned, if unauthenticated is received
// we update the auth state of the front-end
if ( error.response.status === 401 ) {
Vue.$storage.remove('authenticated')
}
// Return the error when we need to handle it at component level
if( error.config.hasOwnProperty('returnError') && error.config.returnError === true ) {

View File

@ -26,9 +26,6 @@ Vue.mixin({
},
clearStorage() {
this.$storage.set('accounts')
this.$storage.set('groups')
this.$storage.set('lastRoute')
},
exitSettings: function (event) {
@ -36,6 +33,10 @@ Vue.mixin({
this.$notify({ clean: true })
this.$router.push({ name: 'accounts' })
}
this.$storage.remove('accounts')
this.$storage.remove('groups')
this.$storage.remove('lastRoute')
this.$storage.remove('authenticated')
},
isUrl: function (url) {

View File

@ -79,7 +79,13 @@ router.beforeEach((to, from, next) => {
isFirstLoad = false;
}
if (to.matched.some(record => record.meta.disabledWithAuthProxy)) {
// See https://github.com/garethredfern/laravel-vue/ if one day the middleware pattern
// becomes relevant (i.e when some admin only pages are necessary)
if (to.name !== 'login' && to.meta.requiresAuth && ! Vue.$storage.get('authenticated', false)) {
next({ name: 'login' })
}
else if (to.matched.some(record => record.meta.disabledWithAuthProxy)) {
if (window.appConfig.proxyAuth) {
next({ name: 'accounts' })
}

View File

@ -81,10 +81,13 @@
this.form.post('/user/login', {returnError: true})
.then(response => {
this.applyPreferences(response.data.preferences);
this.$storage.set('authenticated', true)
this.applyPreferences(response.data.preferences)
this.$router.push({ name: 'accounts', params: { toRefresh: true } })
})
.catch(error => {
this.$storage.set('authenticated', false)
if( error.response.status === 401 ) {
this.$notify({ type: 'is-danger', text: this.$t('auth.forms.authentication_failed'), duration:-1 })
@ -142,12 +145,15 @@
publicKeyCredential.email = this.form.email
this.axios.post('/webauthn/login', publicKeyCredential, {returnError: true}).then(response => {
this.$storage.set('authenticated', true)
this.applyPreferences(response.data.preferences);
this.$router.push({ name: 'accounts', params: { toRefresh: true } })
})
.catch(error => {
if( error.response.status === 401 ) {
this.$storage.set('authenticated', false)
if( error.response.status === 401 ) {
this.$notify({ type: 'is-danger', text: this.$t('auth.forms.authentication_failed'), duration:-1 })
}
else if( error.response.status !== 422 ) {

View File

@ -71,6 +71,7 @@
this.registerForm.post('/user', {returnError: true})
.then(response => {
this.$storage.set('authenticated', true)
this.showWebauthnRegistration = true
})
.catch(error => {