V-Role

Appearance

Return to top
On this page

Navigation Guards

If you are using vue-router you can configure route validation with meta fields.

Typescript

For the first declare meta fields:

ts
declare module "vue-router" {
  interface RouteMeta {
    roles?: string[];
  }
}

Write your own navigation guard:

ts
function validateRole(to, from, next) {
  if (to.meta.roles) {
    const { hasAnyRole } = useRole();
    hasAnyRole(to.meta.roles) ? next() : next(from);
  } else {
    next();
  }
}

Put it in the router:

ts
const router = createRouter({
  history: createWebHistory(),
  routes,
});

router.beforeEach(validateRole);

Now you can specify which roles can enter the route and which can't:

ts
const routes = [
  {
    path: "/",
    component: IndexPage,
    meta: {
      roles: ["admin", "moderator"],
    },
  },
];

Also you can write navigation guards for permissions.