After stumbling upon this post on Medium, I decided to implement its concepts into my project.
My goal was to verify a user's authorization to access a particular route, and if unauthorized, display a modal pop-up.
In order to achieve this, I made some adjustments to my routes:
function isAuthorized(data) {
return data;
}
function isAdmin(to, from, next) {
const isUserAdmin = store.state.authentication.isAdmin;
if (!isUserAdmin) {
next(false);
isAuthorized(true);
} else {
isAuthorized(false);
next();
}
}
const router = new Router({
...
routes: [
{
path: '/admin',
component: Sidebar,
meta: { showModal: isAuthorized },
children: [
{
path: 'sample',
name: 'Sample',
component: Sample,
beforeEnter: isAdmin,
meta: { title: 'Sample Page' },
},
...
Additionally, in my Sidebar.Vue
UnauthorizedModal(:show-modal="showUnauthModal"
@toggle-modal="toggleModal")
export default {
name: 'Sidebar',
components: {
UnauthorizedModal,
},
data() {
return {
showUnauthModal: this.$route.meta.showModal,
};
},
watch: {
'$route.meta'({ showModal }) {
this.showUnauthModal = showModal;
},
},
As for my UnauthorizedModal component
<template lang="pug">
b-modal.simple-modal(
:active="showModal"
scroll="keep"
@close="toggleModal"
)
.modal-container
header
h1
| Unauthorized
</template>
<script>
export default {
name: 'UnauthorizedModal',
props: {
showModal: {
type: Boolean,
required: true,
},
},
methods: {
toggleModal() {
this.$emit('toggle-modal');
},
},
};
</script>
However, upon testing the functionality, I encountered an error in my console.
Invalid prop: type check failed for prop "showModal". Expected Boolean, got Undefined in UnauthorizedModal.vue
This indicates that the modal is not receiving the necessary data from the routes.
I do not wish for any page redirection, just simply the display of a modal when the user lacks authorization for a specific route.
What could be the issue or mistake in my implementation?