If you log out and then go to the tickets page, you should be surprised to be able to access the page! This is because there is a flaw in the implementation of our beforeEach navigation guard--we poorly designed it without taking into account the fact we could have nested routes! The reason for this issue is that the to parameter is only the target route, which is the first child route of the /tickets route--it doesn't have the private meta attribute!

So instead of relying solely on the target route, we should also check all the matched nested route objects. Thankfully, every route object gives us access to the list of these route objects with the matched property. We can then use the some array method to verify if at least one route object has the desired meta attribute.

We can change the conditions code to this in the beforeEach navigation guard in the router.js file:

router.beforeEach((to, from, next) => {
  if (to.matched.some(r => r.meta.private) && !state.user) {
    // ...
  }
  if (to.matched.some(r => r.meta.guest) && state.user) {
    // ...
  }
  next()
})

Now our code works regardless of the number of nested routes!