[UI] Cancel all requests api, async jobs in UI when user logs out (#5663)

* cancel requests in UI when user logs out

* clear notification, message from UI after logout

Author: Hoang Nguyen

ui/src/api/index.js

@@ -15,7 +15,8 @@
 // specific language governing permissions and limitations
 // under the License.
 
-import { axios } from '@/utils/request'
+import { axios, sourceToken } from '@/utils/request'
+import { message, notification } from 'ant-design-vue'
 
 export function api (command, args = {}, method = 'GET', data = {}) {
   let params = {}
@@ -40,6 +41,8 @@ export function api (command, args = {}, method = 'GET', data = {}) {
 }
 
 export function login (arg) {
+  sourceToken.init()
+
   const params = new URLSearchParams()
   params.append('command', 'login')
   params.append('username', arg.username || arg.email)
@@ -57,5 +60,8 @@ export function login (arg) {
 }
 
 export function logout () {
+  sourceToken.cancel()
+  message.destroy()
+  notification.destroy()
   return api('logout')
 }

ui/src/utils/plugins.js

@@ -21,6 +21,7 @@ import { api } from '@/api'
 import { message, notification } from 'ant-design-vue'
 import eventBus from '@/config/eventBus'
 import store from '@/store'
+import { sourceToken } from '@/utils/request'
 
 export const pollJobPlugin = {
   install (Vue) {
@@ -177,20 +178,22 @@ export const pollJobPlugin = {
         }
       }).catch(e => {
         console.error(`${catchMessage} - ${e}`)
-        let countNotify = store.getters.countNotify
-        countNotify++
-        store.commit('SET_COUNT_NOTIFY', countNotify)
-        notification.error({
-          top: '65px',
-          message: i18n.t('label.error'),
-          description: catchMessage,
-          duration: 0,
-          onClose: () => {
-            let countNotify = store.getters.countNotify
-            countNotify > 0 ? countNotify-- : countNotify = 0
-            store.commit('SET_COUNT_NOTIFY', countNotify)
-          }
-        })
+        if (!sourceToken.isCancel(e)) {
+          let countNotify = store.getters.countNotify
+          countNotify++
+          store.commit('SET_COUNT_NOTIFY', countNotify)
+          notification.error({
+            top: '65px',
+            message: i18n.t('label.error'),
+            description: catchMessage,
+            duration: 0,
+            onClose: () => {
+              let countNotify = store.getters.countNotify
+              countNotify > 0 ? countNotify-- : countNotify = 0
+              store.commit('SET_COUNT_NOTIFY', countNotify)
+            }
+          })
+        }
         catchMethod && catchMethod()
       })
     }

ui/src/utils/request.js

@@ -24,6 +24,7 @@ import { CURRENT_PROJECT } from '@/store/mutation-types'
 import { i18n } from '@/locales'
 import store from '@/store'
 
+let source
 const service = axios.create({
   timeout: 600000
 })
@@ -128,6 +129,8 @@ const err = (error) => {
 
 // request interceptor
 service.interceptors.request.use(config => {
+  source = sourceToken.getSource()
+  config.cancelToken = source.token
   if (config && config.params) {
     config.params.response = 'json'
     const project = Vue.ls.get(CURRENT_PROJECT)
@@ -154,7 +157,23 @@ const installer = {
   }
 }
 
+const sourceToken = {
+  init: () => { source = axios.CancelToken.source() },
+  isCancel: (e) => {
+    return axios.isCancel(e)
+  },
+  getSource: () => {
+    if (!source) sourceToken.init()
+    return source
+  },
+  cancel: () => {
+    if (!source) sourceToken.init()
+    source.cancel()
+  }
+}
+
 export {
   installer as VueAxios,
-  service as axios
+  service as axios,
+  sourceToken
 }