VueJS前端/管理屏幕

Question

我们已经使用vue构建了一个前端电子商务应用程序。但我们还没有准备好处理这个应用的后端/管理屏幕。管理员的屏幕将控制这个前端的很多东西。

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

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

这里的任何建议都是很棒的！

Answer 1

我认为在您的情况下，后端这个词是不合适的。你提到的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();
});

​