VueJS前端/管理屏幕

如何解决VueJS前端/管理屏幕

我们已经使用vue构建了一个前端电子商务应用程序。但是我们还没有准备好解决该应用程序的后端/管理屏幕。管理员屏幕将在此前端控制很多事情。

所以我的问题是您是否为此构建了2个独立的应用程序，还是将它们都构建在相同的结构中。如果要在相同的结构中构建它们，那么main.js和app.vue会是什么样？您会在父div上有一个简单的布尔值，该布尔值用于前端，然后用于后端？这些看起来显然将完全不同，尽管它们可能在前端和管理屏幕之间有一些共享组件。

使用路由器似乎很容易将用户定向到正确的文件，但是由于入口点是app.vue和main.js，因此如何启动才是我遇到的麻烦。

这里的任何建议都很棒！

解决方法

我认为在您的情况下，后端一词不合适。您谈到了2个前端，其中之一是为管理员保留的。

两个方面的区别应指导您选择将其分为2个项目，还是使用路由器和权限系统管理分离。

如果复杂的组件是相同的，那么您可能应该在单个项目上工作。如果您想采用其他页面结构，则可能最好使用2个单独的项目。

以下是基于角色授权的路由器示例

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();
});