From 26cd72e7f2389f08a6b695d104fe2e5ad81947be Mon Sep 17 00:00:00 2001 From: Moriz Wahl Date: Mon, 18 Mar 2024 20:40:41 +0100 Subject: [PATCH 1/4] feat(presenter): authorization header --- presenter/renderer/plugins/apollo.ts | 30 +++++++++++++++++++++++----- 1 file changed, 25 insertions(+), 5 deletions(-) diff --git a/presenter/renderer/plugins/apollo.ts b/presenter/renderer/plugins/apollo.ts index 8d86b3c3cd..c22f26a9b0 100644 --- a/presenter/renderer/plugins/apollo.ts +++ b/presenter/renderer/plugins/apollo.ts @@ -1,12 +1,34 @@ import { ApolloClient, InMemoryCache } from '@apollo/client/core' +import { setContext } from '@apollo/client/link/context' import { createHttpLink } from '@apollo/client/link/http' // import { onError } from '@apollo/client/link/error' +import { User } from 'oidc-client-ts' import { ENDPOINTS } from '#src/env' -// HTTP connection to the API +const authLink = setContext((_, { headers }) => { + let token = '' + const auth = localStorage.getItem('auth') + if (auth) { + // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment + const parsed = JSON.parse(auth) + // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access + if (parsed.user) { + // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-assignment + const user: User = parsed.user + token = user.access_token ? user.access_token : '' + } + } + return { + // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment + headers: { + ...headers, + authorization: token ? `Bearer ${token}` : '', + }, + } +}) + const httpLink = createHttpLink({ - // You should use an absolute URL here uri: ENDPOINTS.GRAPHQL_URI, }) @@ -23,12 +45,10 @@ const errorLink = onError(({ graphQLErrors, networkError }) => { }) */ -// Cache implementation const cache = new InMemoryCache() -// Create the apollo client export const apolloClient = new ApolloClient({ ssrMode: true, - link: httpLink, // errorLink.concat(httpLink), + link: authLink.concat(httpLink), // errorLink.concat(httpLink), cache, }) From 2034045b0f38286e6181194f3487d51349cbbc57 Mon Sep 17 00:00:00 2001 From: Moriz Wahl Date: Wed, 20 Mar 2024 10:01:49 +0100 Subject: [PATCH 2/4] get header token from store --- presenter/renderer/app.ts | 11 +++++-- presenter/renderer/plugins/apollo.ts | 44 ++++++++++++---------------- 2 files changed, 27 insertions(+), 28 deletions(-) diff --git a/presenter/renderer/app.ts b/presenter/renderer/app.ts index 49285585be..d78ad23fc6 100644 --- a/presenter/renderer/app.ts +++ b/presenter/renderer/app.ts @@ -5,11 +5,12 @@ import { createSSRApp, defineComponent, h, markRaw, reactive, Component, provide import PageShell from '#components/PageShell.vue' import { setPageContext } from '#context/usePageContext' -import { apolloClient } from '#plugins/apollo' +import { getApolloClient } from '#plugins/apollo' import i18n from '#plugins/i18n' import pinia from '#plugins/pinia' import CreateVuetify from '#plugins/vuetify' import AuthService from '#src/services/AuthService' +import { useAuthStore } from '#stores/authStore' const vuetify = CreateVuetify(i18n) @@ -18,7 +19,7 @@ function createApp(pageContext: PageContext, isClient = true) { let rootComponent: InstanceType const PageWithWrapper = defineComponent({ setup: () => { - provide(DefaultApolloClient, apolloClient) + provide(DefaultApolloClient, getApolloClient(getToken)) provide('authService', new AuthService()) }, data: () => ({ @@ -52,6 +53,12 @@ function createApp(pageContext: PageContext, isClient = true) { app.use(i18n) app.use(vuetify) + const auth = useAuthStore() + + const getToken = (): string => { + return auth.accessToken + } + objectAssign(app, { changePage: (pageContext: PageContext) => { Object.assign(pageContextReactive, pageContext) diff --git a/presenter/renderer/plugins/apollo.ts b/presenter/renderer/plugins/apollo.ts index c22f26a9b0..af191f680c 100644 --- a/presenter/renderer/plugins/apollo.ts +++ b/presenter/renderer/plugins/apollo.ts @@ -2,31 +2,21 @@ import { ApolloClient, InMemoryCache } from '@apollo/client/core' import { setContext } from '@apollo/client/link/context' import { createHttpLink } from '@apollo/client/link/http' // import { onError } from '@apollo/client/link/error' -import { User } from 'oidc-client-ts' import { ENDPOINTS } from '#src/env' -const authLink = setContext((_, { headers }) => { - let token = '' - const auth = localStorage.getItem('auth') - if (auth) { - // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment - const parsed = JSON.parse(auth) - // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access - if (parsed.user) { - // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-assignment - const user: User = parsed.user - token = user.access_token ? user.access_token : '' +const getAuthLink = (getToken: () => string) => { + return setContext((_, { headers }) => { + const token = getToken() + return { + // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment + headers: { + ...headers, + authorization: token ? `Bearer ${token}` : '', + }, } - } - return { - // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment - headers: { - ...headers, - authorization: token ? `Bearer ${token}` : '', - }, - } -}) + }) +} const httpLink = createHttpLink({ uri: ENDPOINTS.GRAPHQL_URI, @@ -47,8 +37,10 @@ const errorLink = onError(({ graphQLErrors, networkError }) => { const cache = new InMemoryCache() -export const apolloClient = new ApolloClient({ - ssrMode: true, - link: authLink.concat(httpLink), // errorLink.concat(httpLink), - cache, -}) +export const getApolloClient = (getToken: () => string) => { + return new ApolloClient({ + ssrMode: true, + link: getAuthLink(getToken).concat(httpLink), // errorLink.concat(httpLink), + cache, + }) +} From 59d8a4c68324572e442521c4712efd1da3c47af4 Mon Sep 17 00:00:00 2001 From: Moriz Wahl Date: Wed, 20 Mar 2024 10:21:53 +0100 Subject: [PATCH 3/4] change function names --- presenter/renderer/app.ts | 4 ++-- presenter/renderer/plugins/apollo.ts | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/presenter/renderer/app.ts b/presenter/renderer/app.ts index d78ad23fc6..4362b36d81 100644 --- a/presenter/renderer/app.ts +++ b/presenter/renderer/app.ts @@ -5,7 +5,7 @@ import { createSSRApp, defineComponent, h, markRaw, reactive, Component, provide import PageShell from '#components/PageShell.vue' import { setPageContext } from '#context/usePageContext' -import { getApolloClient } from '#plugins/apollo' +import { createApolloClient } from '#plugins/apollo' import i18n from '#plugins/i18n' import pinia from '#plugins/pinia' import CreateVuetify from '#plugins/vuetify' @@ -19,7 +19,7 @@ function createApp(pageContext: PageContext, isClient = true) { let rootComponent: InstanceType const PageWithWrapper = defineComponent({ setup: () => { - provide(DefaultApolloClient, getApolloClient(getToken)) + provide(DefaultApolloClient, createApolloClient(getToken)) provide('authService', new AuthService()) }, data: () => ({ diff --git a/presenter/renderer/plugins/apollo.ts b/presenter/renderer/plugins/apollo.ts index af191f680c..9663f7b7b0 100644 --- a/presenter/renderer/plugins/apollo.ts +++ b/presenter/renderer/plugins/apollo.ts @@ -5,7 +5,7 @@ import { createHttpLink } from '@apollo/client/link/http' import { ENDPOINTS } from '#src/env' -const getAuthLink = (getToken: () => string) => { +const createAuthLink = (getToken: () => string) => { return setContext((_, { headers }) => { const token = getToken() return { @@ -37,10 +37,10 @@ const errorLink = onError(({ graphQLErrors, networkError }) => { const cache = new InMemoryCache() -export const getApolloClient = (getToken: () => string) => { +export const createApolloClient = (getToken: () => string) => { return new ApolloClient({ ssrMode: true, - link: getAuthLink(getToken).concat(httpLink), // errorLink.concat(httpLink), + link: createAuthLink(getToken).concat(httpLink), // errorLink.concat(httpLink), cache, }) } From 7c5f165a4ff7d86c5594a5168ce027fd8afed4c7 Mon Sep 17 00:00:00 2001 From: Moriz Wahl Date: Wed, 20 Mar 2024 10:55:31 +0100 Subject: [PATCH 4/4] no authorizattion header if no token is present --- presenter/renderer/plugins/apollo.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/presenter/renderer/plugins/apollo.ts b/presenter/renderer/plugins/apollo.ts index 9663f7b7b0..df8b296d1b 100644 --- a/presenter/renderer/plugins/apollo.ts +++ b/presenter/renderer/plugins/apollo.ts @@ -12,7 +12,7 @@ const createAuthLink = (getToken: () => string) => { // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment headers: { ...headers, - authorization: token ? `Bearer ${token}` : '', + ...(token && { authorization: `Bearer ${token}` }), }, } })