Routes.js call function from composable - laravel-8

Question

I am working on my routes.js and I want to check if user has access to module before redirecting them by calling the function hasAccess() from a composable but it's giving me this warning:
[Vue warn]: inject() can only be used inside setup() or functional components.
routes.js
import { createWebHistory, createRouter } from "vue-router";
import useFN from "./composables/FN"
const routes = [
// define routes here
]
const router = createRouter({
history: createWebHistory(),
routes,
})
const { hasAccess } = useFN() // use function from composable
router.beforeEach(async (to, from, next) => {
console.log(await hasAccess()); // call function from composable
next()
}
export default router;
How can I call a function from composable if I don't have setup()?

Answer 1

Usually I don't have any issues using composables I create for my self as they are usually very basic, but according to Vue 3 - inject() can only be used inside setup() or functional components
composable your composable appears to be using provide/inject which is intended within a setup() method
I will like to propose another approach if viable.
You could call a method(action), getter inside your store instead, if you are using one.
I often use that perform checks before navigating to a route for example if a user account is suspended or the authenticated user does not have the intended privilege
import { createRouter, createWebHistory } from 'vue-router'
import store from '#/store'
...
const account = {
'ACTIVE': 1,
'RESTRICTED': 2,
'DECLINED': 0
}
const routes = [
{
path: '/some-path',
component: () => import('../components/...'),
props: route => ({ reference: route.query.reference }),
meta: { requiresAuth: true },
beforeEnter: async (to, from) => {
if (store.getters['Auth/authUser'].account_status == account.RESTRICTED) {
return false
}
return true
},
},
...
]
```