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

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

This is the way I am using vue-stash
Install

npm install vue-stash

Then :

quasar new plugin store

it creates store.js in the src/plugins folder. Open it and add :

// import something here
import VueStash from 'vue-stash'
// leave the export, even if you don't use it
export default ({ app, router, Vue }) => {
  // something to do
  Vue.use(VueStash)
  app.data = {
    store: {
// define your data here for example
     user: {
         name: 'Bob',
         email: 'bob@bobby.fr'
}
    }
  }
}

Then you have to open the quasar config : quasar.conf.js and add ‘store’ in the plugins array

plugins: [
...,
'store'
],

and your good to go. To load the store in your vue files, include :

store: {
\\ precise the date you want top import here, for example as mentioned above
   user
}

be careful to completely define your data in the store.js file if you want them to be reactive.

Hello,

I am using the free version of fontAwesome. Some icon does not show though most do. For example :
<q-icon name="fas fa-user-plus"></q-icon>
works whereas
<q-icon name="fas fa-user-alt"></q-icon>
doesn’t.
I am in version 0.15 and have declared the fontawesome in quasar.conf according to the doc.

Is there something I’m missing?

Thanks

Following up my first post, the included Webpack bundle analyzer allowed me to discover some huge modules crippling the download times. Once again, great doc, the necessary ip change has been really easy.

Now, the vendor js file is the only quite huge file containing vue, vue-router and apollo modules and the quasar one, the biggest one by far.

I also dicovered that the layouts have their own js file with their own modules. Most modules are the same as the main content. Does it mean that they are loaded twice? In the sake of lowering the overall page weight, would it be preferable not to use layout?

Hello,

I am working on a web app for my non-profit organization. It can be seen at https://newagenda.labonnefabrique.fr/
The app aims a providing tools for advertising and registration. It is using graphCool+apollo as database and is hosted by Netlify or Surge with little differences.
Using the Chrome audit tool the mobile performances on 3G is very poor (19%, 15s to get to the page for Netlify, 28% and 13s for surge) and a good fraction of this time is used to load and execute the scripts.

I know that Quasar is already highly optimized but what would be the possibilities to enhance the loading times and optimize the page weight?

thanks,
Nicolas

Great !

Thank you very much!

Hi,

I’d like to focus on a q-input contained in a popover/dialog when the popover/dialog is shown (usually through a button). I can’t find the way to do it. Here a fiddle with a try :
https://jsfiddle.net/waugrryy/288/
I put two buttons. The first one to show the popover and simultaneously I call the focus function with the @click event. No focus is happening inside the popover.
The second button is inside the popover and correctly set the focus.

I would like to focus when one clicks on the first button. Is there a way to do that?

Thanks,
Nicolas

Hello,

I have a layout containing auth functionalities and pages with behaviours depending on the auth state (login/logout).

how can I trigger an update of the page when the auth state is changed within the layout? I have some auth function added as mixins in the pages. There is in particular an isLoggedIn function checking whether a token is set in the quasar localStorage. Is there any way for example to watch the isLoggedIn function?

I understand vuex could be the solution but it adds a complexity layer I’d like to avoid if possible.

Thanks

Hello,

I’d need to translate the months abbreviation (formatDate with ‘MMM’ token). There are the option dayNames and monthNames for translating days and months. Is there any equivalent for the months abbreviation?

Thanks, and I wish you all a happy new year.
Nicolas

Hello,

I am building a small app with graphcool as a graphQL database. The graphCool end point URI is setup in my main.js file.

I was wondering how this is dealt with during the build. Can the URI still be found in the build files? From a security point of view, what could be the right way to do?

Thanks,
Nicolas

Hi Benoit,

Thanks for your answer. Sorry if it was rather a vue issue. As I am learning both at the same time, I have hard time to tell sometimes. I guess I’ll go along your first solution.

Cheers

Heelo,

First post here as I am learning vue + Quasar. So far I loved them both.

SO I have a route with a layout a several children route. I’d like to have a different title in the layout depending on the children. How can I pass the title up to the layout?

Thanks
Nicolas