[Vuejs]-VueJS Frontend / Admin Screens

by

0👍

I believe that in your case the word backend is not appropriate. You speak of 2 front-ends, one of which is reserved for admins.

The difference between the two fronts should guide you in your choice of separating it into 2 projects or managing the separation with the router and a permissions system.

If complex components are in common, then you should probably be working on a single project. If you want to adopt a different page structure then maybe 2 separate projects will work best.

Here is an example of a router based on role authorization

https://codesandbox.io/s/k5kp135z95?file=/_helpers/router.js

export const router = new Router({
  mode: "history",
  routes: [
    {
      path: "/",
      component: HomePage,
      meta: { authorize: [] }
    },
    {
      path: "/admin",
      component: AdminPage,
      meta: { authorize: [Role.Admin] }
    },
    {
      path: "/login",
      component: LoginPage
    },

    // otherwise redirect to home
    { path: "*", redirect: "/" }
  ]
});

router.beforeEach((to, from, next) => {
  // redirect to login page if not logged in and trying to access a restricted page
  const { authorize } = to.meta;
  const currentUser = authenticationService.currentUserValue;

  if (authorize) {
    if (!currentUser) {
      // not logged in so redirect to login page with the return url
      return next({ path: "/login", query: { returnUrl: to.path } });
    }

    // check if route is restricted by role
    if (authorize.length && !authorize.includes(currentUser.role)) {
      // role not authorised so redirect to home page
      return next({ path: "/" });
    }
  }

  next();
});

Leave a comment