Tuesday, 21 September 2021

Display layout based on boolean from Vuex

I got Vue2 app with vue-router with routings configured like that:

export default {
  path: "/",
  redirect: "/dashboard",
  component: AdminLayout,
  meta: {
    requiresAuth: true
  },
  children: [
    {
      path: "/dashboard",
      name: "Dashboard",
      component: Dashboard
    },
    {
      path: "/add/user",
      name: "InviteUser",
      component: InviteUser
    },
    {
      path: "/groups",
      name: "Groups",
      component: Groups
    },
   ...

In app, we got two different types of users - admin and normal user. Some of those routings should be accessible for both, but the problem is that user should see different layout base on its type (permission) - AdminLayout for admins and UserLayout for normal users.

Is there any way to show app which template should user see based on boolean from vuex with keeping route path?

  • on /dashboard admin will see dashboard with AdminLayout
  • on /dashboard normal user will see dashboard with UserLayout

My main routing cofig:

import Vue from "vue";
import VueRouter from "vue-router";

import SessionRoutes from "./session.js";
import AdminRoutes from "./admin.js";
import defaultRoutes from "./default";

Vue.use(VueRouter);

const routes = [AdminRoutes, SessionRoutes, defaultRoutes];

const router = new VueRouter({
  mode: "history",
  routes
});

export default router;



from Display layout based on boolean from Vuex

No comments:

Post a Comment