Hide component outside the router-Viewer

Question

I’m using the Vue Rotuer to control the routes of my project, with this, I saw the need to use Navigation Guards.

<script>
    export default{
        beforeRouteEnter(to, from, next){
            if(to.meta.adminOnly === false){
                //alert('f')
                next()
            }
        }
    }
</script>

Up to there everything great, however, I saw a difficulty, because it is a dashboard, I have the page of login and other pages. On my page app.vue I have the following structure.

<template>
    <div id="app">
        <Menu></Menu>
        <router-view class="containerView"></router-view>
    </div>
</template>

The component Menu has all my side and top menu, because I want to change the page, it remains and only the contents change, so I left out the <router-view></router-view>.

However, I am having difficulty to hide it, in case my user is not logged in (is on the login page), and I could not solve, I tried to use the beforeRouterEnter on the page app.vue to validate which page the user is in and whether the page contains the meta adminOnly, but it didn’t work, and I didn’t want to use localStorage to make this validation, because the same, would keep my system insecure of more.

Answer 1

The tools available on the Vue-router are:

• beforeEach
• fields meta

Configure each route that needs authentication with meta: { requiresAuth: true }. You can put that on children as is in the documentation:

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      children: [
        {
          path: 'bar',
          component: Bar,
          // a meta field
          meta: { requiresAuth: true }
        }
      ]
    }
  ]
})

Then you check it before each route. The beforeEach passes the to which is the route that was requested. Then you can check if that route needs authorization. If you need to and are not logged in, redirect to the login page.

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // this route requires auth, check if logged in
    // if not, redirect to login page.
    if (!auth.loggedIn()) {
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      })
    } else {
      next()
    }
  } else {
    next() // make sure to always call next()!
  }
})

The part of saving the information of being logged in or there are no different ways. You can save only in a variable with status true|false, via localStorage etc..

There is a video about this useful: https://www.youtube.com/watch?v=i2yc_ACcMA0