Как динамически изменить исходный файл VueRouter? - PullRequest
Новая
       8

Как динамически изменить исходный файл VueRouter?

0 голосов
/ 03 октября 2019

Здравствуйте, у меня есть проект, который содержит несколько ролей (VueJs + Laravel), я использую laravel в качестве бэк-энда и vuejs в качестве фронт-энда, у меня три разные роли (пользователь, модератор, редактор).

это мой код в app.js 

// VueRouter
import VueRouter from 'vue-router';
import routes from './routes.js';
Vue.use(VueRouter);

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

это мой файл маршрутов: 

let routes = [

    // General 
    { path: '/about', component: require('./components/Home/About.vue').default },
    { path: '/pasword-change',  component: require('./components/ChangePassword.vue').default },

    // User
    { path: '/User', component: require('./components/User/Dashboard.vue').default },


    // Modirator
    { path: '/Modirator', component: require('./components/Modirator/Dashboard.vue').default },

    // Editor
    { path: '/Editor', component: require('./components/Editor/Dashboard.vue').default },


    // Error
    { path: '*', component: require('./components/Errors/404.vue').default} },

]
export default routes

после входа я хочу проверить его в бэк-энде какajax-запрос, если роль - пользовательское использование (rout-user.js); в противном случае - использование модоратора (rout-mod.js); в противном случае (rout.js).

я не хочу показывать / user / modirator / editor в клиенте, но я хочу проверить после входа в систему и показывать каждый компонент роли в корневом URL-адресе / . спасибо за помощь.

спасибо за помощь ....

Ответы [ 2 ]

1 голос
/ 03 октября 2019

Я протестировал нечто похожее на ваше требование для нормальной передачи компонентов и отложенной загрузки компонентов в Vuex, и это работает. Ниже мой код, который я пытаюсь сделать, имеет переменную «неавторизованный» и на основе которой я загружаю другой компонент, используя тернарный оператор javascript или строку шаблона javascript. 

import Vue from 'vue'
import Router from 'vue-router'
import Auth from './views/Auth.vue'
import Board from './views/Board.vue'

Vue.use(Router)

let unauthorized = true;

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/auth',
      name: 'authenticate',
      component: unauthorized ? Auth : Board
    },
    {
      path: '/',
      name: 'home',
      component: () => import(`./views/${unauthorized ? 'Auth.vue': 'Board.vue'}`)
    }
  ]
})

Определенное решение

Согласно вашему требованию, вы можете хранить переменную («тип доступа») в локальном хранилище в зависимости от того, вошли ли вы как «модератор», «пользователь» или «редактор», а затем извлекли еев файле router.js и используйте функцию строки шаблона для условного изменения пути к компоненту.

Дайте мне знать, если вам нужна дополнительная помощь.

0 голосов
/ 03 октября 2019

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

    { path: '/about', component: require('./components/Home/About.vue').default },
    { path: '/pasword-change',  component: require('./components/ChangePassword.vue').default },

    // User
    { path: '/User', component: require('./components/User/Dashboard.vue').default, meta: {authorize: ["Admin"]} },

Затем добавьте следующий метод к вашему маршрутизатору: 

router.beforeEach((to, from, next) => {
  const { authorize } = to.meta
  // get currently logged in user (in my case it's coming from vuex)
  const currentUser = store.getters['authentication/user']

  if (!currentUser && to.path !== '/login') {
    // not logged in so redirect to login page with the return url
    return next({ path: '/login', query: { returnUrl: to.path } })
  }

  if (authorize) {
    // check if route is restricted by role
    if (authorize.length && !authorize.some(r => currentUser.roles.includes(r))) {
      // role not authorised so redirect to home page
      return next({ path: '/' })
    }
  }

  next()
})
...