oys/bab-app
1
0
Fork 0
Code Issues 29 Pull Requests Actions Packages Projects 1 Releases 2 Wiki Activity

More auth / role checks for navlinks

Browse Source
This commit is contained in:
Patrick Toal
2024-05-23 09:55:02 -04:00
parent c03ad48615
commit b0d6ec877b
4 changed files with 58 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
src/components/LeftDrawer.vue
View File

@@ -4,37 +4,50 @@
show-if-above
:width="200"
:breakpoint="1024"
@update:model-value="$emit('drawer-toggle')"
>
@update:model-value="$emit('drawer-toggle')">
<q-scroll-area class="fit">
<q-list padding class="menu-list">
<template v-for="link in enabledLinks" :key="link.name">
<!-- TODO: Template this to be DRY --><q-item
<q-list
padding
class="menu-list">
<template
v-for="link in enabledLinks"
:key="link.name">
<!-- TODO: Template this to be DRY -->
<q-item
clickable
v-ripple
:to="link.to"
>
:to="link.to">
<q-item-section avatar>
<q-icon :name="link.icon" />
</q-item-section>
<q-item-section> {{ link.name }} </q-item-section>
<q-item-section>{{ link.name }}</q-item-section>
</q-item>
<q-list v-if="link.sublinks">
<div v-for="sublink in link.sublinks" :key="sublink.name">
<q-item clickable v-ripple :to="sublink.to" class="q-ml-md">
<div
v-for="sublink in link.sublinks"
:key="sublink.name">
<q-item
clickable
v-ripple
:to="sublink.to"
class="q-ml-md"
v-if="hasRole(sublink.requiredRoles)">
<q-item-section avatar>
<q-icon :name="sublink.icon" />
</q-item-section>
<q-item-section> {{ sublink.name }} </q-item-section>
<q-item-section>{{ sublink.name }}</q-item-section>
</q-item>
</div></q-list
>
</div>
</q-list>
</template>
<q-item clickable v-ripple @click="logout()">
<q-item-section avatar><q-icon name="logout" /></q-item-section
><q-item-section>Logout</q-item-section>
<q-item
clickable
v-ripple
@click="logout()">
<q-item-section avatar><q-icon name="logout" /></q-item-section>
<q-item-section>Logout</q-item-section>
</q-item>
</q-list>
</q-scroll-area>
@@ -44,8 +57,17 @@
<script lang="ts" setup>
import { defineComponent } from 'vue';
import { enabledLinks } from 'src/router/navlinks.js';
import { useAuthStore } from 'src/stores/auth';
import { logout } from 'boot/appwrite';
const authStore = useAuthStore();
function hasRole(roles: string[] | undefined) {
if (roles === undefined) return true;
const hasRole = authStore.hasRequiredRole(roles);
return hasRole;
}
defineProps(['drawer']);
defineEmits(['drawer-toggle']);