Как создать промежуточное программное обеспечение или как управлять нижеприведенным маршрутом для интерфейса и администратора

Как создать промежуточное программное обеспечение или как управлять нижеприведенным маршрутом для интерфейса и администратора

10.10.2019 02:42:51 Просмотров 44 Источник

Как я могу управлять url-адресом для передней и административной панели с помощью промежуточного программного обеспечения в Vue.

Это код, который я написал в маршрутизаторе / индексе.файл JS :

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

  router.beforeEach((to, from, next) => {

  // redirect to login page if not logged in and trying to access a restricted page
  const loggedIn = localStorage.getItem('usertoken') == null ? false : true;
  const user = JSON.parse(localStorage.getItem('user'));

  //this is for admin
  next('/admin/login')
  next('/admin/home');

  //this is my front URL
  next('/terms-condition');
  next('/home');
  next()
})
export default router;
У вопроса есть решение - Посмотреть?

Ответы - Как создать промежуточное программное обеспечение или как управлять нижеприведенным маршрутом для интерфейса и администратора / How to create a middleware or how to manage the below route for front end and admin

chans

10.10.2019 02:48:21

То, как вы реализовали это правильно

После того, как пользователь успешно вошел в систему, используйте условие if else для перенаправления на панель администратора, а также используйте навигационные щиты, указанные в vue-router

https://router.vuejs.org/guide/advanced/navigation-guards.html#per-route-guard

Это поможет предотвратить использование этого url-адреса другим пользователем напрямую

Является ответом!
Saher Siddiqui

10.10.2019 03:33:43

Смотрите ниже код он может помочь вам

/** * промежуточное ПО для аутентификации */

router.beforeEach((to, from, next) => {
// redirect to login page if not logged in and trying to access a restricted page
  const loggedIn = localStorage.getItem('usertoken') == null ? false : true;
  const user = JSON.parse(localStorage.getItem('user'));

  if (to.meta.portal == 'admin') {
    if (to.meta.auth) {
        if (!loggedIn) {
            next('/admin/login')
        } else if (loggedIn) {
            next();
        }
    } else {
        if (!loggedIn) {
            next();
        } else if (loggedIn) {
            if (user.role_id == '1') {
                next('/admin/home');
            } else {
                next('/');
            }
        }

    }
  } else if (to.meta.portal == 'front') {

    if (loggedIn) {

        if (user.role_id == '1') {
            next('/admin/home');
        } else {
            next('/');
        }

    } else if (!loggedIn) {
        if (to.path == "/admin") {
            next('/admin/login');
        } else {
            next();
        }
    }
  }
 next()
})

export default router;

И вам нужно создать два файла маршрутизатора один для фронта и другой для администратора:

// передний файл маршрута будет выглядеть так

export default [{
path: '/',
meta: { auth: false, portal: 'front' },
component: () => import('@/components/layouts/front/main.vue'),
children: [
    {
        path: '/',
        name: 'front-home',
        title: 'Dashboard',
        meta: { auth: false, portal: 'front' },
    }
   ]
}]

// admin router file будет выглядеть так

export default [
 {
    path: 'user',
    name: 'users',
    title: 'Users',
    meta: { auth: true, portal: 'admin' },
    component: () => import('@/components/templates/admin/user'),
 }
]

Главным отличием является портал, который определяет, к какому порталу будет осуществляться доступ по соответствующему маршруту.Без портала внутри мета-это не сработает.

Закрыть X