Есть ли способ в vue отображать только страницу администратора для пользователя с правами администратора и показывать обычным пользователям только обычные страницы?

Question

Есть ли способ в vue, чтобы я мог показывать только некоторые представления обычным пользователям и все представления администраторам?

Я использую Firestore для своих операций CRUD

Например: я администратор, я могу выполнять функции CRUD и иметь доступ ко всему сайту. Хотя не администратор не может делать CRUD и не может получить доступ к странице администратора?

Я думаю, что я могу сделать это в vue -рутер, но я не знаю, как это реализовать. Надеюсь, вы можете помочь мне!

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 в маршрутизаторе, чтобы проверить, являются ли они администратором или обычным пользователем, и принять соответствующие меры. Примерно так:

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 будет вызываться каждый раз перед сменой маршрута. Вы можете проверить, является ли пользователь администратором или нет, и может отправлять на соответствующий маршрут на основании этого.

Answer 2

Я не Vue пользователь, но я считаю, что авторизация и аутентификация должны выполняться на стороне сервера.

Ваш код Vue будет загружен на компьютер клиента, поэтому они могли бы манипулировать им, если бы захотели. Маршрутизатор может показывать и скрывать страницы, но вам необходимо убедиться, что операции CRUD проверены на стороне сервера.

Answer 3

Vue, как и в других средах javascripts, есть пакеты ролей и разрешений, это удивительная статья в среде, в которой подробно рассказывается, как сделать роль и использовать ее.

https://medium.com/@manojkumar_88220 / на основе ролей -Authentication-using- vuejs -2-f54e18498019