From 9938834f4c3ab3d7bb0f0899fe4c37ba2f0ae0d8 Mon Sep 17 00:00:00 2001 From: Pranav C Date: Mon, 4 Jul 2022 10:39:21 +0530 Subject: [PATCH] wip(nuxt3): add interceptor Signed-off-by: Pranav C --- packages/nc-gui-v2/composables/project.ts | 13 +-- packages/nc-gui-v2/composables/user.ts | 91 +++++++++++++++++++++ packages/nc-gui-v2/pages/projects/index.vue | 6 +- packages/nc-gui-v2/plugins/api.ts | 17 +--- 4 files changed, 96 insertions(+), 31 deletions(-) diff --git a/packages/nc-gui-v2/composables/project.ts b/packages/nc-gui-v2/composables/project.ts index f635a7bd7a..41e6c3e0ae 100644 --- a/packages/nc-gui-v2/composables/project.ts +++ b/packages/nc-gui-v2/composables/project.ts @@ -4,28 +4,19 @@ import {useUser} from "~/composables/user"; export const useProject = () => { const {$api} = useNuxtApp() - const {user} = useUser() const project = useState<{ id?: string, title?: string }>('project', null) const tables = useState>('tables', null) const loadTables = async () => { - const tablesResponse = await $api.dbTable.list(project?.value?.id, {}, { - headers: { - 'xc-auth': user.token - } - }) + const tablesResponse = await $api.dbTable.list(project?.value?.id) console.log(tablesResponse) tables.value = tablesResponse.list } const loadProject = async (projectId:string) => { - const projectResponse = await $api.project.read(projectId, { - headers: { - 'xc-auth': user.token - } - }) + const projectResponse = await $api.project.read(projectId) console.log(projectResponse) project.value = projectResponse diff --git a/packages/nc-gui-v2/composables/user.ts b/packages/nc-gui-v2/composables/user.ts index a5068953aa..0467343a04 100644 --- a/packages/nc-gui-v2/composables/user.ts +++ b/packages/nc-gui-v2/composables/user.ts @@ -12,6 +12,8 @@ export const useUser = () =>{ }) const {$api} = useNuxtApp() + const route = useRoute() + const router = useRouter() const getUser =async (args = {}) => { @@ -28,5 +30,94 @@ export const useUser = () =>{ user.token = token } + + + $api?.instance?.interceptors.request.use((config) => { + config.headers['xc-gui'] = 'true' + if (user?.token) { + config.headers['xc-auth'] = user?.token + } + if (!config.url.endsWith('/user/me') && !config.url.endsWith('/admin/roles')) { + // config.headers['xc-preview'] = store.state.users.previewAs + } + + if (!config.url.endsWith('/user/me') && !config.url.endsWith('/admin/roles')) { + if (route && route.params && route.params.shared_base_id) { + config.headers['xc-shared-base-id'] = route.params.shared_base_id + } + } + + return config + }) + + // $axios.setBaseURL('http://localhost:8080') + + $api?.instance?.interceptors.response.use((response) => { + // Return a successful response back to the calling service + return response + }, (error) => { + if (error.response && error.response.data && error.response.data.msg === 'Database config not found') { + router.replace('/project/0') + return + } + + // Return any error which is not due to authentication back to the calling service + if (!error.response || error.response.status !== 401) { + return new Promise((resolve, reject) => { + reject(error) + }) + } + + // Logout user if token refresh didn't work or user is disabled + if (error.config.url === '/auth/refresh-token') { + // todo: clear token + // store.dispatch('users/ActSignOut') + setToken(null) + + return new Promise((resolve, reject) => { + reject(error) + }) + } + + // Try request again with new token + return $api.instance.post('/auth/refresh-token', null, { + withCredentials: true + }) + .then((token) => { + // New request with new token + const config = error.config + config.headers['xc-auth'] = token.data.token + user.token = token.data.token + + return new Promise((resolve, reject) => { + $api.instance.request(config).then((response) => { + resolve(response) + }).catch((error) => { + reject(error) + }) + }) + }) + .catch(async (error) => { + //todo: clear token + // await store.dispatch('users/ActSignOut') + setToken(null) + if (store.state.project.appInfo.firstUser) { + router.replace('/') + } else { + // $toast.clear() + // $toast.info('Token Expired. Please login again.', { + // position: 'bottom-center' + // }).goAway(5000) + router.replace('/user/authentication/signin') + } + return Promise.reject(error) + }) + }) + + return {user,setToken, getUser} } + + + + diff --git a/packages/nc-gui-v2/pages/projects/index.vue b/packages/nc-gui-v2/pages/projects/index.vue index 0fdd5785e4..8f7e6e45a3 100644 --- a/packages/nc-gui-v2/pages/projects/index.vue +++ b/packages/nc-gui-v2/pages/projects/index.vue @@ -47,11 +47,7 @@ const $router = useRouter(); const projects = ref(); const loadProjects = async () => { - const projectsResponse = await $api.project.list({}, { - headers: { - "xc-auth": user.token - } - }); + const projectsResponse = await $api.project.list(); projects.value = projectsResponse.list; }; diff --git a/packages/nc-gui-v2/plugins/api.ts b/packages/nc-gui-v2/plugins/api.ts index 6646ecfe3c..38413b951c 100644 --- a/packages/nc-gui-v2/plugins/api.ts +++ b/packages/nc-gui-v2/plugins/api.ts @@ -1,27 +1,21 @@ import { useNuxtApp } from "#app"; import { Api } from "nocodb-sdk"; import { defineNuxtPlugin } from "nuxt3/app"; -import { watch } from "vue"; -import { useUser } from "~/composables/user"; - export default defineNuxtPlugin((nuxtApp) => { - const { user } = useUser(); // Doing something with nuxtApp const api = getApi(null, null); - nuxtApp.provide("api", api); - + // nuxtApp.provide("api", api); - debugger return { provide: { - api123: api + api } }; }); @@ -41,10 +35,3 @@ export function getApi($store, $axios) { } return api; } - -// -// export default function({ store: $store, $axios, ...rest }, inject) { -// const api = getApi($store, $axios) -// -// inject('api', api) -// }