javascript - vue 有没有办法只为管理员用户显示管理页面，并只向普通用户显示常规页面？

Question

vue中有没有一种方法可以只向普通用户显示一些 View ，而向管理员用户显示所有 View ？

我正在使用 Firestore 进行 CRUD 操作

例如:我是管理员，我可以执行CRUD功能并且可以访问整个站点。非管理员无法进行CRUD并且无法访问管理页面？

我想我可以在 vue-router 中做到这一点，但我不知道如何实现。希望你能帮助我!

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [{
    path: '/',
    name: 'Login',
    component: () => {
      return import('@/views/auth/vLoginLandingPage')
    }
  },
  {
    path: '/announcements',
    name: 'Announcements',
    component: () => {
      return import('@/views/drawer/announcement/vAnnouncementLandingPage')
    },

  }
]

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

export default router

Answer 1

您可以使用路由器中的 beforeEnter Hook 来检查他们是管理员用户还是普通用户，并采取相应的操作。类似于以下内容:

const routes = [{
    path: '/',
    name: 'Login',
    component: () => {
      return import('@/views/auth/vLoginLandingPage')
    }
  },
  {
    path: '/announcements',
    name: 'Announcements',
    beforeEnter: checkAdminRights
    component: () => {
      return import('@/views/drawer/announcement/vAnnouncementLandingPage')
    },

  }
]


function checkAdminRights(to, from, next) {
    // check if the user is admin
    if(userIsAdmin) {
        next({ path: '/adminroute'});       
    } else {
        next({ path: '/nonadminroute'});
    }
}

每次路由更改之前都会调用函数 checkAdminRights。您可以检查用户是否是管理员，并可以根据该信息发送到相应的路由。