vue 中有没有办法只显示管理员用户的管理页面，只显示普通用户的常规页面？答案

【问题标题】：Is there a way in vue to only display admin page for the admin user and show only to regular users regular pages?vue 中有没有办法只显示管理员用户的管理页面，只显示普通用户的常规页面？
【发布时间】：2020-05-18 06:50:00
【问题描述】：

vue 有没有办法只能向普通用户显示一些视图，向管理员用户显示所有视图？

我正在使用 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

【问题讨论】：

标签： javascript vue.js vuejs2 vue-router

【解决方案1】：

您可以使用路由器中的 beforeEnter 挂钩来检查他们是管理员用户还是普通用户并采取相应措施。类似于以下内容：

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 将在每次路由更改之前调用。您可以在此检查用户是否为管理员，并可以在此基础上发送到相应的路由。

【讨论】：

【解决方案2】：

Vue 像其他 javascripts 框架一样具有角色和权限包，这是一篇很棒的媒体文章，详细解释了角色和使用它。

https://medium.com/@manojkumar_88220/role-based-authentication-using-vue-js-2-f54e18498019

【讨论】：

【解决方案3】：

我不是Vue用户，但我认为授权和认证需要在服务器端完成。

您的 Vue 代码将全部加载到客户的计算机上，因此他们可以根据需要对其进行操作。路由器可以显示和隐藏页面，但您需要确保 CRUD 操作在服务器端得到验证。

【讨论】：