pass data from one boot file to another
-
Hello,
I have defined two boot files, one for setting vue-keycloak for auth and the other for setting Vue-apollo.
// boot/auth.js import VueKeyCloak from '@dsb-norge/vue-keycloak-js' export default async ({ Vue, router, store, app }) => { await new Promise((resolve, reject) => { Vue.use(VueKeyCloak, { logout: { redirectUri: process.env.BASE_URL }, config: { realm: 'LBF', url: 'https://cloud.labonnefabrique.fr/auth', clientId: 'lbf-frontend' }, init: { onLoad: 'check-sso', checkLoginIframe: false }, onInitError: error => { console.log('erreur init :', error) reject('error', error) }, onReady: keycloak => { resolve('keycloak defined') } }) }) // guard routes definition based on authentification router.beforeEach((to, from, next) => { if (to.matched.some(record => record.meta.requiresAuth)) { if (router.app.$keycloak.authenticated) { next() } else { let redirect = process.env.BASE_URL + to.path router.app.$keycloak.login({ redirectUri: redirect }) } } else { next() } }) }
I have to make sure that the keycloak is initialized before getting to apollo, hence the await of the promise. I defined the boot files in the correct order in the quasar.conf.js file.
// boot/apollo.js import { ApolloClient } from 'apollo-client' import { InMemoryCache } from 'apollo-cache-inmemory' import VueApollo from 'vue-apollo' import fetch from 'node-fetch' import { createHttpLink } from 'apollo-link-http' const HASURAURL = process.env.HASURA_URL const HASURASECRET = process.env.HASURA_ADMIN_SECRET export default ({ app, router, Vue }) => { // How to obtain vuekeycloak token ? // router.app.$keycloak return 'TypeError: Cannot read property '$keycloak' of null' const httpLink = createHttpLink({ uri: HASURAURL, fetch: fetch, headers: { //'x-hasura-admin-secret': HASURASECRET Authorization: "Bearer " + vuekeycloaktoken } }) // Create the apollo client const apolloClient = new ApolloClient({ link: httpLink, cache: new InMemoryCache(), connectToDevTools: true }) let apolloProvider = new VueApollo({ defaultClient: apolloClient, errorHandler({ graphQLErrors, networkError }) { if (graphQLErrors) { graphQLErrors.map(({ message, locations, path }) => console.log( `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}` ) ) } if (networkError) { console.log(`[Network error]: ${networkError}`) } } }) Vue.use(VueApollo) app.apolloProvider = apolloProvider }
So I need to pass the authorization token returned by keycloak as header for apollo query and I don’t know how to do. In the auth file, the token is given by keycloak.token.
- I’d rather not use vuex as it is a bit overkill for this single application (I am not planning to use vuex in my app)
- In the apollo boot file I tried to get all the apollo definitions inside the export default to get access to app and router and get to router.app.$keycloak but I receive an error “TypeError: Cannot read property ‘$keycloak’ of null”, because app = null when it’s called
- I thought that export the keycloak.token in the auth boot file would be the right way to go. But with that promise inside which the keycloak object is created I don’t know how to export a const token. An export const vuekeycloaktoken = keycloak.token returns undefined as the promise is not resolved.
Do you know how I should proceed?
Thanks -
OK, using cookie ou localStorage to store authorization token is not good practice but I may use localStorage and erase the stored token once assigned to a const.
But, the await promise in the auth.js doesn’t work as auth is correctly initialized first but apollo is then treated before auth gets any retour for keycloak.
How to setup y authjs correctly to make it ‘wait’ for the keycloak server to respond before treating the apollo.js boot file? While at it, I could use some good tutorials on promises as I can’t get the grasp of it.
Thanks