Vuejs загрузка маршрута в зависимости от типа пользователя - PullRequest
Новая
       4

Vuejs загрузка маршрута в зависимости от типа пользователя

0 голосов
/ 20 февраля 2020

Я возвращаю тип пользователя во всех моих компонентах, но мне нужно добавить проверку его в мои маршруты, не знаю, как это сделать.

Код

Это мой файл route.js, где маршруты, которые нужны пользователям для аутентификации, определены в meta

import Vue from "vue";
import VueRouter from 'vue-router';
import store from './store';
Vue.use(VueRouter);

const router = new VueRouter({
    mode: "history",
    routes: [
        // ADMIN ROUTES
        {
            path: '/dashboard',
            name: 'dashboard',
            component: Dashboard,
            meta: {
                requiresAuth: true,
                layout: 'admin'
            }
        },
    ]
});

router.beforeEach((to, from, next) => {
    if (to.matched.some(record => record.meta.requiresAuth)) {
      if (!store.getters.isLoggedIn) {
        next({
          name: 'login'
        })
      } else {
        next()
      }
    } else {
      next()
    }
  })

router.afterEach((to, from) => {
    Vue.nextTick(() => {
        document.title = to.pageTitle || 'CC';
    });
});

export default router;

. Как видите, у меня есть requiresAuth: true,, который позволяет только аутентифицированному пользователю получить доступ к этому маршруту, мне также нужно добавить другое значение, которое говорит if user type == admin, что не все вошедшие в систему пользователи могут получить доступ к такому маршруту, но только администраторы.

Это моя информация о зарегистрированных пользователях, которая доступна во всех компонентах и ​​включает type значение

one

Вопрос

Как добавить тип пользователя в мета-маршруты?

Примечание

моим значением типа может быть одно из этих 3 условий

  1. admin (роль администратора)
  2. customer (любое роль другого пользователя)
  3. undefined (пользователь без назначенной роли)

Обновление

Забыли упомянуть, что во всех моих компонентах у меня также есть эта функция 

beforeRouteEnter (to, from, next) {
  const token = localStorage.getItem('access_token')
  return token ? next() : next('/login')
},

Это просто проверка, если мой пользователь вошел в систему на основе сохраненного токена в localStorage

Обновление 2

Я также пытался получить свой тип пользователя в функции компонента, как показано ниже, но возвращается this.$store не определено 

beforeRouteEnter (to, from, next) {
    if (this.$store.getters.loggedUser.type != 'admin') {
        next({
            name: 'home'
        })
    } else {
        next()
    }
}

1 Ответ

1 голос
/ 20 февраля 2020

Экземпляр компонента this недоступен внутри beforeRouteEnter См. Здесь .

Один из способов сделать то, что вы хотите, - это добавить другой метаатрибут к вашим маршрутам администратора и проверить тип пользователя для каждого маршрута, который имеет admin: true.

Ваш код маршрутизатора будет выглядеть примерно так: 

const router = new VueRouter({
    mode: "history",
    routes: [
        // ADMIN ROUTES
        {
            path: '/dashboard',
            name: 'dashboard',
            component: Dashboard,
            meta: {
                requiresAuth: true,
                layout: 'admin',
                admin: true
            }
        },
    ]
});

router.beforeEach((to, from, next) => {
    if (to.matched.some(record => record.meta.requiresAuth)) {
        if (!store.getters.isLoggedIn) {
            next({
                name: 'login'
            })
        } 
    }
    if (to.matched.some(record => record.meta.admin)) {
        if (store.getters.loggedUser.type !== 'admin') {
            // Do something if the user is not an admin
            // maybe redirect to a forbidden page
        }
    }
    next() 
})
...