Permission navigation in vuejs + laravel?

Question

I have a campaign list page. Now I want when the user logs in, if he doesn't have access to the campaign list page, it won't show the menu and won't allow access to that url ? Give me ideas. Thanks

Update : My problem is similar to this: Router permission in vuejs + laravel?

Answer 1

You could store the state in the Vuex store. Then in the router, you need to check if the user is logged in and else redirect the user 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 (!store.getters.isLoggedIn) {
      next({ name: 'Login' })
    } else {
      next() // go to wherever I'm going
    }
  } else {
    next() // does not require auth, make sure to always call next()!
  }
})

Here is the original answer: https://stackoverflow.com/a/52663166/9318504

For just showing or hiding elements like a navigation bar or a menu you can just use v-if

<Navigationbar v-if="userLoggedIn" />
<Menu v-if="userLoggedIn" />