How to properly use the meta props on vue router?

Question

I'm trying to handle route middleware of the children route, but I got this error

Uncaught TypeError: route.children.some is not a function

The documentation are only shows the example for a single route but in this case, I have a children route that needs to be restricted.

Please take a look at my router configuration:

import Vue from 'vue'
import Router from 'vue-router'
import store from './store/index'

import Home from './views/home/Index.vue'

Vue.use(Router)

let router = new Router({
  mode: 'history',
  base: process.env.VUE_APP_BASE_URL,
  linkActiveClass: 'is-active',
  linkExactActiveClass: 'is-exact-active',
  routes: [{
      path: '/',
      name: 'home',
      component: Home,
      meta: {
        requiresAuth: true
      }
    },
    {
      path: '/login',
      name: 'login',
      // route level code-splitting
      // this generates a separate chunk (login.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import('./views/auth/Login.vue'),
      meta: {
        requiresGuest: true
      }
    },
    {
      path: '/register',
      name: 'register',
      component: () => import('./views/auth/Register.vue'),
      meta: {
        requiresGuest: true
      }
    },
    {
      path: '/forgot-password',
      name: 'forgot-password',
      component: () => import('./views/auth/extras/ForgotPassword.vue'),
      meta: {
        requiresGuest: true
      }
    },
    {
      path: '/database',
      name: 'database',
      component: () => import('./views/database/Index.vue'),
      meta: {
        requiresAuth: true
      }
    },
    {
      path: '/third-parties',
      name: 'third-parties',
      component: () => import('./views/third-parties/Index.vue'),
      meta: {
        requiresAuth: true
      }
    },
    {
      path: '/editor',
      name: 'editor',
      meta: {
        requiresAuth: true,
        requiresAdmin: true,
        requiresEditor: true,
      },
      children: {
        path: ':appSlug/layout-editor/:pageSlug',
        name: 'layout-editor',
        component: () => import('./views/editor/Index.vue'),      
      }
    },
  ]
})


router.beforeEach((to, from, next) => {
  const isLoggedIn = store.getters['auth/isLoggedIn'];

  // Role getters
  const isAdmin = (store.getters['auth/isAdmin'] == 'admin') || (store.getters['auth/isAdmin'] == 'super-admin');
  const isEditor = store.getters['auth/isEditor'] == 'editor';

  // Redirect to the login page if the user is not logged in
  // and the route meta record is requires auth
  if (to.matched.some(record => record.meta.requiresAuth) && !isLoggedIn) {
    next('/login')
  }

  // Redirect to the homepage page if the user is logged in
  // and the route meta record is requires guest
  if (to.matched.some(record => record.meta.requiresGuest) && isLoggedIn) {
    next('/')
  }

  // Redirect to the preview page if the user is logged in
  // but has no role assigned or the role is user
  if (to.matched.some(record => (
      record.meta.requiresAuth &&
      record.meta.requiresAdmin &&
      record.meta.requiresEditor)) && !isAdmin && !isEditor) {

    next('/preview')

  }

  // Pass any access if not match two conditions above
  next()
})

export default router

Could somebody please explain it? Why I getting this error and how to fix it?

Thanks in advance.

Tamma Tamma · Accepted Answer · 2019-10-05T21:59:27

I just found the answer, kinda silly tho.. I forgot to put square brackets on the children props. Now it's working as I expected.

fix:

{
  path: '/editor',
  name: 'editor',
  meta: {
    requiresAuth: true,
    requiresAdmin: true,
    requiresEditor: true,
  },
  children: [{
    path: ':appSlug/layout-editor/:pageSlug',
    name: 'layout-editor',
    component: () => import('./views/editor/Index.vue'),      
  }]
},

How to properly use the meta props on vue router?

1 Answers