Restricted pages as per user permission - vuejs / laravel

[Pearlaqua]

How to allow or prevent a user from accessing a particular page? Let's say that the user is not allowed to access the page finanças. Where do I inform on the vuejs route the access permissions of this page? Remembering that these permissions will be set on siteStorage from a laravel backend.

[kalena]

You can use the beforeEach Router or other equivalent if using another router to validate all protected routes, as per the https://router.vuejs.org/en/advanced/navigation-guards.html , to validate the token and permissions in the backend and receive a simple response of authorized or not from the backend so that the frontend will continue navigation to the route or not.

You can also define a method beforeEnter to validate a specific route:

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})