I'm trying to create a global function to check authenticated user roles to display components based on his/her roles.
This is my boot file:
import { boot } from 'quasar/wrappers';
import { Store as VuexStore } from 'vuex';
import store, { StateInterface } from 'src/store';
export function canAccess(roles: string[]) {
const s = store({}) as VuexStore<StateInterface>;
const userRoles = s.state.auth.profile?.roles;
const listRoles = userRoles?.map((role) => role.title);
console.log(listRoles);
return true;
}
export default boot(({ app }) => {
app.config.globalProperties.$canAccess = canAccess;
});
I know this code wouldn't check roles, but it logs undefined. I couldn't find a way to get Vue 3 store state (Vuex 4) in js/ts module to check user roles.
How can i do that in Vue3 + Vuex4 + Quasar?