npm i auth-analytic-vue
main.js example
createApp(App)
.use(
createAuthPlugin({
fetch: fetchToken
})
)
The method by which you get access rights to the user session
Use setScopes for set permission in userScope
You can also, as in the example, use other request data.
Don't call the method unnecessarily (token)
example
async function fetchToken(setScopes) {
const token = localStorage.getItem('token')
// mandatory check
if (!token) return
const response = await fetch(`${process.env.VUE_APP_SERVER_URL}/user`, {
headers: {
Authorization: `Bearer ${token}`
}
})
const { data } = await response.json()
const store = useUserStore()
store.setPersonal(data)
setScopes(data.permissions)
}
Use the directive to check access. Pass an array of necessary rights inside the directive
<h1 v-auth="['checkHeading']">Test</h1>
Connect first fetch guard & second access guard router/index.js
import { fetchAuthDataMiddleware, accessGuardMiddleware } from 'auth-analytic-vue'
router.beforeEach(fetchAuthDataMiddleware)
router.beforeEach(accessGuardMiddleware)
If necessary, add an array of access Scopus strings to the label or write your custom guard to check the roles
router/middleware/accessGuardMiddleware
example
function accessGuardMiddleware(to) {
const { accessScopes } = to.meta
if (!accessScopes) return
const { checkHasScope } = useAuthService()
if (checkHasScope(accessScopes)) return
return { name: routesNameList.AUTH }
}
example route
{
path: '/',
component: Home,
meta: {
accessScopes: ['home.visible']
}
}
If it is necessary to filter the array of pages in the menu depending on the role
example
import { useAuthService } from 'auth-analytic-vue'
const { checkHasScope } = useAuthService()
const items = [{ name: 'Home', scopes: ['home.visible'] }, { name: 'AdminPanel, scopes: ['admin.panel'] }]
const itemsFiltered = computed(() => {
return items.filter((item) => checkHasScope(item.scopes))
})
tlg: https://t.me/ensine
e-mail: andrey.aker899@gmail.com
Thats great idea Mirtov Sergey.