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.

    1. 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)
    2. 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
    3. 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


Log in to reply