No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    pass data from one boot file to another

    Help
    1
    2
    585
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • N
      Nico-L last edited by

      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

      1 Reply Last reply Reply Quote 0
      • N
        Nico-L last edited by

        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

        1 Reply Last reply Reply Quote 0
        • First post
          Last post