From e1428116379d607e0f6a60f991f443d37bc0124d Mon Sep 17 00:00:00 2001 From: Sanskar Soni Date: Thu, 14 Sep 2023 10:43:29 +0530 Subject: [PATCH 1/3] Implemented: support for single logout --- package-lock.json | 25 ++++++++++++++----------- package.json | 4 ++-- src/App.vue | 3 ++- src/adapter/index.ts | 4 +++- src/main.ts | 5 ++++- src/store/modules/user/actions.ts | 10 ++++++++-- src/user-utils/index.ts | 2 +- 7 files changed, 34 insertions(+), 19 deletions(-) diff --git a/package-lock.json b/package-lock.json index 2c6a0f42..19339976 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,8 +14,8 @@ "@casl/ability": "^6.0.0", "@hotwax/app-version-info": "^1.0.0", "@hotwax/apps-theme": "^1.1.0", - "@hotwax/dxp-components": "^1.3.4", - "@hotwax/oms-api": "^1.7.0", + "@hotwax/dxp-components": "^1.5.3", + "@hotwax/oms-api": "^1.9.0", "@ionic/core": "6.7.5", "@ionic/vue": "6.7.5", "@ionic/vue-router": "6.7.5", @@ -2127,9 +2127,9 @@ "license": "Apache-2.0" }, "node_modules/@hotwax/dxp-components": { - "version": "1.3.4", - "resolved": "https://registry.npmjs.org/@hotwax/dxp-components/-/dxp-components-1.3.4.tgz", - "integrity": "sha512-uw0dmxm19lzsgcLWZ2fQBAZem0d7TkxGR0iSq1c7Bj1mkAJZXH5JbP12w0lYhtes7Q1MjhHPlWljCh6624E9XA==", + "version": "1.5.3", + "resolved": "https://registry.npmjs.org/@hotwax/dxp-components/-/dxp-components-1.5.3.tgz", + "integrity": "sha512-6u9CpzkYrgQt1tfMeXRgpXnh1hHYoagagDByX/8nfZ+VziKtSY70bfAves3AipluL3MdJq9WEpOzG0r0a/VA6g==", "dependencies": { "@hotwax/oms-api": "^1.8.1", "luxon": "^3.3.0", @@ -2139,8 +2139,9 @@ } }, "node_modules/@hotwax/oms-api": { - "version": "1.8.1", - "license": "Apache-2.0", + "version": "1.9.0", + "resolved": "https://registry.npmjs.org/@hotwax/oms-api/-/oms-api-1.9.0.tgz", + "integrity": "sha512-1PcS95vP8PzzlBRwHQRk99eJT0xStBSmNdpdoATRUSlLamxmHZ8RAwAwY3usph5gNy7Z+WzAxl9fJXX9VgWP9g==", "dependencies": { "@types/node-json-transform": "^1.0.0", "axios": "^0.21.1", @@ -31937,9 +31938,9 @@ "version": "1.2.3" }, "@hotwax/dxp-components": { - "version": "1.3.4", - "resolved": "https://registry.npmjs.org/@hotwax/dxp-components/-/dxp-components-1.3.4.tgz", - "integrity": "sha512-uw0dmxm19lzsgcLWZ2fQBAZem0d7TkxGR0iSq1c7Bj1mkAJZXH5JbP12w0lYhtes7Q1MjhHPlWljCh6624E9XA==", + "version": "1.5.3", + "resolved": "https://registry.npmjs.org/@hotwax/dxp-components/-/dxp-components-1.5.3.tgz", + "integrity": "sha512-6u9CpzkYrgQt1tfMeXRgpXnh1hHYoagagDByX/8nfZ+VziKtSY70bfAves3AipluL3MdJq9WEpOzG0r0a/VA6g==", "requires": { "@hotwax/oms-api": "^1.8.1", "luxon": "^3.3.0", @@ -31949,7 +31950,9 @@ } }, "@hotwax/oms-api": { - "version": "1.8.1", + "version": "1.9.0", + "resolved": "https://registry.npmjs.org/@hotwax/oms-api/-/oms-api-1.9.0.tgz", + "integrity": "sha512-1PcS95vP8PzzlBRwHQRk99eJT0xStBSmNdpdoATRUSlLamxmHZ8RAwAwY3usph5gNy7Z+WzAxl9fJXX9VgWP9g==", "requires": { "@types/node-json-transform": "^1.0.0", "axios": "^0.21.1", diff --git a/package.json b/package.json index 4008af45..72ffbfd1 100644 --- a/package.json +++ b/package.json @@ -18,8 +18,8 @@ "@casl/ability": "^6.0.0", "@hotwax/app-version-info": "^1.0.0", "@hotwax/apps-theme": "^1.1.0", - "@hotwax/dxp-components": "^1.3.4", - "@hotwax/oms-api": "^1.7.0", + "@hotwax/dxp-components": "^1.5.3", + "@hotwax/oms-api": "^1.9.0", "@ionic/core": "6.7.5", "@ionic/vue": "6.7.5", "@ionic/vue-router": "6.7.5", diff --git a/src/App.vue b/src/App.vue index dbafd668..1deb9fe8 100644 --- a/src/App.vue +++ b/src/App.vue @@ -59,7 +59,8 @@ export default defineComponent({ } }, async unauthorised() { - this.store.dispatch("user/logout"); + // Mark the user as unauthorised, this will help in not making the logout api call in actions + this.store.dispatch("user/logout", { isUserUnauthorised: true }); const redirectUrl = window.location.origin + '/login'; window.location.href = `${process.env.VUE_APP_LOGIN_URL}?redirectUrl=${redirectUrl}`; } diff --git a/src/adapter/index.ts b/src/adapter/index.ts index 0d512378..0fea6aab 100644 --- a/src/adapter/index.ts +++ b/src/adapter/index.ts @@ -1,9 +1,11 @@ -import { api, client, initialise, resetConfig, updateInstanceUrl, updateToken } from '@hotwax/oms-api' +import { api, client, getConfig, initialise, logout, resetConfig, updateInstanceUrl, updateToken } from '@hotwax/oms-api' export { api, client, + getConfig, initialise, + logout, resetConfig, updateInstanceUrl, updateToken diff --git a/src/main.ts b/src/main.ts index d27124dd..aaef0fad 100644 --- a/src/main.ts +++ b/src/main.ts @@ -33,6 +33,7 @@ import permissionRules from '@/authorization/Rules'; import permissionActions from '@/authorization/Actions'; import { dxpComponents } from '@hotwax/dxp-components' import { login, logout, loader } from './user-utils'; +import { getConfig, initialise } from '@/adapter' const app = createApp(App) .use(IonicVue, { @@ -50,7 +51,9 @@ const app = createApp(App) login, logout, loader, - appLoginUrl: process.env.VUE_APP_LOGIN_URL as string + appLoginUrl: process.env.VUE_APP_LOGIN_URL as string, + getConfig, + initialise }); // Filters are removed in Vue 3 and global filter introduced https://v3.vuejs.org/guide/migration/filters.html#global-filters diff --git a/src/store/modules/user/actions.ts b/src/store/modules/user/actions.ts index 9ae8cfab..75e04012 100644 --- a/src/store/modules/user/actions.ts +++ b/src/store/modules/user/actions.ts @@ -6,7 +6,7 @@ import * as types from './mutation-types' import { hasError, showToast } from '@/utils' import { translate } from '@/i18n' import { Settings } from 'luxon'; -import { updateInstanceUrl, updateToken, resetConfig } from '@/adapter' +import { logout, updateInstanceUrl, updateToken, resetConfig } from '@/adapter' import { getServerPermissionsFromRules, prepareAppPermissions, @@ -92,7 +92,13 @@ const actions: ActionTree = { /** * Logout user */ - async logout ({ commit }) { + async logout ({ commit }, payload) { + // Calling the logout api to flag the user as logged out, only when user is authorised + // if the user is already unauthorised then not calling the logout api as it returns 401 again that results in a loop, thus there is no need to call logout api if the user is unauthorised + if (!payload?.isUserUnauthorised) { + await logout(); + } + const authStore = useAuthStore() // TODO add any other tasks if need diff --git a/src/user-utils/index.ts b/src/user-utils/index.ts index faf98e48..44c37aba 100644 --- a/src/user-utils/index.ts +++ b/src/user-utils/index.ts @@ -4,7 +4,7 @@ import { loadingController } from '@ionic/vue' const login = async (payload: any) => store.dispatch('user/login', payload); -const logout = async () => store.dispatch('user/logout'); +const logout = async (payload: any) => store.dispatch('user/logout', payload); const loader = { value: null as any, From 9ca5704455d7c8aae475866638c285e7233e7739 Mon Sep 17 00:00:00 2001 From: Sanskar Soni Date: Tue, 26 Sep 2023 11:32:15 +0530 Subject: [PATCH 2/3] Improved: code to redirect the user to SSO screen when enabled otherwise redirect to launchpad on logout, and added support to loader for custom message in case of logout --- src/App.vue | 9 ++++++--- src/locales/en.json | 1 + src/store/modules/user/actions.ts | 23 ++++++++++++++++++++++- src/views/Settings.vue | 18 ++++++++++++------ 4 files changed, 41 insertions(+), 10 deletions(-) diff --git a/src/App.vue b/src/App.vue index 1deb9fe8..2564ff9d 100644 --- a/src/App.vue +++ b/src/App.vue @@ -41,13 +41,16 @@ export default defineComponent({ } }, methods: { - async presentLoader() { + async presentLoader(options = { message: '', backdropDismiss: true }) { + // When having a custom message remove already existing loader + if(options.message && this.loader) this.dismissLoader(); + if (!this.loader) { this.loader = await loadingController .create({ - message: this.$t("Click the backdrop to dismiss."), + message: options.message ? this.$t(options.message) : this.$t("Click the backdrop to dismiss."), translucent: true, - backdropDismiss: true + backdropDismiss: options.backdropDismiss }); } this.loader.present(); diff --git a/src/locales/en.json b/src/locales/en.json index 805a9265..bab7b33c 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -27,6 +27,7 @@ "Log variance": "Log variance", "Login": "Login", "Logging in": "Logging in", + "Logging out": "Logging out", "Logout": "Logout", "Make sure you've reviewed the products and their counts before uploading them for review": "Make sure you've reviewed the products and their counts before uploading them for review", "No time zone found": "No time zone found", diff --git a/src/store/modules/user/actions.ts b/src/store/modules/user/actions.ts index 75e04012..e47cb3ae 100644 --- a/src/store/modules/user/actions.ts +++ b/src/store/modules/user/actions.ts @@ -14,6 +14,7 @@ import { setPermissions } from '@/authorization' import { useAuthStore } from '@hotwax/dxp-components' +import emitter from '@/event-bus' const actions: ActionTree = { @@ -93,10 +94,22 @@ const actions: ActionTree = { * Logout user */ async logout ({ commit }, payload) { + // store the url on which we need to redirect the user after logout api completes in case of SSO enabled + let redirectionUrl = '' + + emitter.emit('presentLoader', { message: 'Logging out', backdropDismiss: false }) + // Calling the logout api to flag the user as logged out, only when user is authorised // if the user is already unauthorised then not calling the logout api as it returns 401 again that results in a loop, thus there is no need to call logout api if the user is unauthorised if (!payload?.isUserUnauthorised) { - await logout(); + let resp = await logout(); + + // Added logic to remove the `//` from the resp as in case of get request we are having the extra characters and in case of post we are having 403 + resp = JSON.parse(resp.startsWith('//') ? resp.replace('//', '') : resp) + + if(resp.logoutAuthType == 'SAML2SSO') { + redirectionUrl = resp.logoutUrl + } } const authStore = useAuthStore() @@ -110,6 +123,14 @@ const actions: ActionTree = { // reset plugin state on logout authStore.$reset() + + // If we get any url in logout api resp then we will redirect the user to the url + if(redirectionUrl) { + window.location.href = redirectionUrl + } + + emitter.emit('dismissLoader') + return redirectionUrl; }, /** diff --git a/src/views/Settings.vue b/src/views/Settings.vue index fd91a018..5c1807f5 100644 --- a/src/views/Settings.vue +++ b/src/views/Settings.vue @@ -229,9 +229,12 @@ export default defineComponent({ { text: this.$t('Ok'), handler: () => { - this.store.dispatch('user/logout').then(() => { - const redirectUrl = window.location.origin + '/login' - window.location.href = `${process.env.VUE_APP_LOGIN_URL}?isLoggedOut=true&redirectUrl=${redirectUrl}` + this.store.dispatch('user/logout', { isUserUnauthorised: false }).then((redirectionUrl) => { + // if not having redirection url then redirect the user to launchpad + if (!redirectionUrl) { + const redirectUrl = window.location.origin + '/login' + window.location.href = `${process.env.VUE_APP_LOGIN_URL}?isLoggedOut=true&redirectUrl=${redirectUrl}` + } }) } }] @@ -271,9 +274,12 @@ export default defineComponent({ if (Object.keys(this.uploadProducts).length > 0) { this.presentAlertOnLogout(); } else { - this.store.dispatch('user/logout').then(() => { - const redirectUrl = window.location.origin + '/login' - window.location.href = `${process.env.VUE_APP_LOGIN_URL}?isLoggedOut=true&redirectUrl=${redirectUrl}` + this.store.dispatch('user/logout', { isUserUnauthorised: false }).then((redirectionUrl) => { + // if not having redirection url then redirect the user to launchpad + if (!redirectionUrl) { + const redirectUrl = window.location.origin + '/login' + window.location.href = `${process.env.VUE_APP_LOGIN_URL}?isLoggedOut=true&redirectUrl=${redirectUrl}` + } }) } }, From 2513533977aad1444e0f17b748be5ca46410e77e Mon Sep 17 00:00:00 2001 From: Sanskar Soni Date: Mon, 9 Oct 2023 18:31:00 +0530 Subject: [PATCH 3/3] Implemented: parsing logic in try catch as in some case the logout api makes redirection, and then we are unable to parse the resp --- src/store/modules/user/actions.ts | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/src/store/modules/user/actions.ts b/src/store/modules/user/actions.ts index e47cb3ae..cc43516e 100644 --- a/src/store/modules/user/actions.ts +++ b/src/store/modules/user/actions.ts @@ -101,13 +101,20 @@ const actions: ActionTree = { // Calling the logout api to flag the user as logged out, only when user is authorised // if the user is already unauthorised then not calling the logout api as it returns 401 again that results in a loop, thus there is no need to call logout api if the user is unauthorised - if (!payload?.isUserUnauthorised) { - let resp = await logout(); + if(!payload?.isUserUnauthorised) { + let resp; - // Added logic to remove the `//` from the resp as in case of get request we are having the extra characters and in case of post we are having 403 - resp = JSON.parse(resp.startsWith('//') ? resp.replace('//', '') : resp) + // wrapping the parsing logic in try catch as in some case the logout api makes redirection, and then we are unable to parse the resp and thus the logout process halts + try { + resp = await logout(); - if(resp.logoutAuthType == 'SAML2SSO') { + // Added logic to remove the `//` from the resp as in case of get request we are having the extra characters and in case of post we are having 403 + resp = JSON.parse(resp.startsWith('//') ? resp.replace('//', '') : resp) + } catch(err) { + console.error('Error parsing data', err) + } + + if(resp?.logoutAuthType == 'SAML2SSO') { redirectionUrl = resp.logoutUrl } }