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

resources/js/api.js

@@ -14,6 +14,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 ) {
         return Promise.reject(error);

resources/js/mixins.js

@@ -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) {

resources/js/routes.js

@@ -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' })
         }

resources/js/views/auth/Login.vue

@@ -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,10 +145,13 @@
                 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 => {
+                    this.$storage.set('authenticated', false)
+
                     if( error.response.status === 401 ) {
                         
                         this.$notify({ type: 'is-danger', text: this.$t('auth.forms.authentication_failed'), duration:-1 })

resources/js/views/auth/Register.vue

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