[Vuejs]-Trigger a modal if User is Unauthorized in vue-router

0👍

In your child component (sample), there is no meta.showModal, so it’s undefined if you access to child component.

You can try adding showModal to child component

const router = new Router({
  ...
  routes: [
  {
  path: '/admin',
  component: Sidebar,
  meta: { showModal: false },
  children: [
    {
      path: 'sample',
      name: 'Sample',
      component: Sample,
      beforeEnter: isAdmin,
      meta: { title: 'Sample Page', showModal: false },
    },

I’m not sure you can mutate the meta data of router in beforeEnter or not. But you can try

function isAdmin(to, from, next) {
  const isUserAdmin = store.state.authentication.isAdmin;
  if (!isUserAdmin) {
    next(false);
    to.meta = {
      ...to.meta,
      showModal: true
    }
  } else {
     to.meta = {
      ...to.meta,
      showModal: true
    }
    next();
  }
}

Leave a comment