Resolve "Signing out changes the state before login page is loaded"

changelog.md

@@ -15,7 +15,9 @@ For example:
 * Add support for language selection and group invitation tokens for OAuth 2 and SAML. [#1293](https://gitlab.com/bramw/baserow/-/issues/1293)
 
 ### Bug Fixes
+
 * Raise an exception when a user doesn't have a required feature on an endpoint
+* Fixed authenticated state changing before redirected to the login page when logging off. [#1328](https://gitlab.com/bramw/baserow/-/issues/1328)
 * `permanently_delete_marked_trash` task no longer fails on permanently deleting a table before an associated rows batch.  [#1266](https://gitlab.com/bramw/baserow/-/issues/1266)
 
 ### Refactors

web-frontend/modules/core/components/dashboard/DashboardSidebar.vue

@@ -79,6 +79,7 @@
 <script>
 import TrashModal from '@baserow/modules/core/components/trash/TrashModal'
 import SettingsModal from '@baserow/modules/core/components/settings/SettingsModal'
+import { logoutAndRedirectToLogin } from '@baserow/modules/core/utils/auth'
 
 export default {
   name: 'DashboardSidebar',
@@ -98,8 +99,7 @@ export default {
   },
   methods: {
     logoff() {
-      this.$store.dispatch('auth/logoff')
-      this.$nuxt.$router.push({ name: 'login' })
+      logoutAndRedirectToLogin(this.$nuxt.$router, this.$store)
     },
   },
 }

web-frontend/modules/core/components/settings/DeleteAccountSettings.vue

@@ -112,6 +112,7 @@ import AuthService from '@baserow/modules/core/services/auth'
 import PasswordInput from '@baserow/modules/core/components/helpers/PasswordInput'
 import { passwordValidation } from '@baserow/modules/core/validators'
 import GroupService from '@baserow/modules/core/services/group'
+import { logoutAndRedirectToLogin } from '@baserow/modules/core/utils/auth'
 
 export default {
   components: { PasswordInput },
@@ -161,9 +162,8 @@ export default {
     },
   },
   methods: {
-    async logoff() {
-      await this.$store.dispatch('auth/logoff')
-      this.$nuxt.$router.push({ name: 'login' })
+    logoff() {
+      logoutAndRedirectToLogin(this.$nuxt.$router, this.$store)
       this.$store.dispatch('notification/success', {
         title: this.$t('deleteAccountSettings.accountDeletedSuccessTitle'),
         message: this.$t('deleteAccountSettings.accountDeletedSuccessMessage'),

web-frontend/modules/core/components/sidebar/Sidebar.vue

@@ -43,7 +43,10 @@
             <SettingsModal ref="settingsModal"></SettingsModal>
           </li>
           <li>
-            <a @click="logoff()">
+            <a
+              :class="{ 'context__menu-item--loading': logoffLoading }"
+              @click="logoff()"
+            >
               <i class="context__menu-icon fas fa-fw fa-sign-out-alt"></i>
               {{ $t('sidebar.logoff') }}
             </a>
@@ -345,6 +348,7 @@ import editGroup from '@baserow/modules/core/mixins/editGroup'
 import undoRedo from '@baserow/modules/core/mixins/undoRedo'
 import BaserowLogo from '@baserow/modules/core/components/BaserowLogo'
 import GroupMemberInviteModal from '@baserow/modules/core/components/group/GroupMemberInviteModal'
+import { logoutAndRedirectToLogin } from '@baserow/modules/core/utils/auth'
 
 export default {
   name: 'Sidebar',
@@ -361,6 +365,11 @@ export default {
     GroupMemberInviteModal,
   },
   mixins: [editGroup, undoRedo],
+  data() {
+    return {
+      logoffLoading: false,
+    }
+  },
   computed: {
     /**
      * Because all the applications that belong to the user are in the store we will
@@ -407,7 +416,6 @@ export default {
       })
     },
     ...mapState({
-      allApplications: (state) => state.application.items,
       groups: (state) => state.group.items,
       selectedGroup: (state) => state.group.selected,
     }),
@@ -429,8 +437,8 @@ export default {
       return this.$registry.get('job', job.type).getSidebarComponent()
     },
     logoff() {
-      this.$store.dispatch('auth/logoff')
-      this.$nuxt.$router.push({ name: 'login' })
+      this.logoffLoading = true
+      logoutAndRedirectToLogin(this.$nuxt.$router, this.$store)
     },
     /**
      * Called when the user clicks on the admin menu. Because there isn't an

web-frontend/modules/core/store/auth.js

@@ -12,6 +12,7 @@ export const state = () => ({
   token: null,
   refreshToken: null,
   user: null,
+  authenticated: false,
   additional: {},
   webSocketId: null,
   // Indicates whether a token should be set persistently as a cookie using the
@@ -32,6 +33,7 @@ export const mutations = {
     // backend user data registry. We want to store them in the `additional` state so
     // that it can be used by other modules.
     state.additional = additional
+    state.authenticated = true
   },
   UPDATE_USER_DATA(state, { user, ...data }) {
     if (user !== undefined) {
@@ -44,9 +46,16 @@ export const mutations = {
     }
     _.mergeWith(state.additional, data, customizer)
   },
+  LOGOFF(state) {
+    state.token = null
+    state.refreshToken = null
+    state.authenticated = false
+  },
   CLEAR_USER_DATA(state) {
     state.token = null
+    state.refreshToken = null
     state.user = null
+    state.authenticated = false
   },
   SET_REFRESHING(state, refreshing) {
     state.refreshing = refreshing
@@ -106,13 +115,19 @@ export const actions = {
    * Logs off the user by removing the token as a cookie and clearing the user
    * data.
    */
-  async logoff({ commit, dispatch }) {
+  logoff({ commit }) {
     unsetToken(this.app)
     unsetGroupCookie(this.app)
-    commit('CLEAR_USER_DATA')
+    commit('LOGOFF')
+  },
+  /**
+   * Clears all the user data present in any other stores.
+   */
+  async clearAllStoreUserData({ commit, dispatch }) {
     await dispatch('group/clearAll', {}, { root: true })
     await dispatch('group/unselect', {}, { root: true })
     await dispatch('job/clearAll', {}, { root: true })
+    commit('CLEAR_USER_DATA')
   },
   /**
    * Refresh the existing token. If successful commit the new token and start a
@@ -206,7 +221,7 @@ export const actions = {
 
 export const getters = {
   isAuthenticated(state) {
-    return !!state.user
+    return state.authenticated
   },
   isRefreshing(state) {
     return state.refreshing

web-frontend/modules/core/utils/auth.js

@@ -37,3 +37,10 @@ export const getTokenIfEnoughTimeLeft = (
     return token
   }
 }
+
+export const logoutAndRedirectToLogin = (router, store) => {
+  store.dispatch('auth/logoff')
+  router.push({ name: 'login' }, () => {
+    store.dispatch('auth/clearAllStoreUserData')
+  })
+}