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
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
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.
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
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