VueJS Как реализовать RouterGaurd - PullRequest
Новая
       8

VueJS Как реализовать RouterGaurd

0 голосов
/ 02 января 2019

В реальном приложении Vue маршрутизатор может легко добраться до нескольких сотен строк, поэтому я разбил router.js на отдельные (компонентные) файлы маршрутов и импортировал их в index.js Однако, делая это, ясломал функцию beforEach, и я не могу понять, как использовать защиту аутентификации с измененным кодом.

Нижеприведенная реализация beforeEach throws:

Uncaught TypeError: rout.beforeEach не является функцией

Любая помощь с примерами будетс благодарностью!

Мои маршруты index.js: 

import Vue from 'vue';
import Router from "vue-router";
import firebase from 'firebase'

// BASE ROUTES
import {
  . . .
  aBunch,
  ofRoutes,
  . . .
} from '@/routers/base'

// INVENTORY ROUTERS
import {
  . . .
  aBunch,
  more,
  routes,
  . . .
} from '@/routers/inventory'

Vue.use(Router);

const baseRoute = [
  {
    path: '*',
    redirect: '/login'
  },
  {
    path: '/',
    redirect: '/login'
  },
  {
    path: '/login',
    name: 'login',
    component: load('Login'),
    meta: { transitionName: 'slide' },
  },
  {
    path: '/sign-up',
    name: 'sign up',
    component: load('Signup'),
    meta: { transitionName: 'slide' },
  },
]

const routes = baseRoute.concat(
  . . .
  concat,
  aBunch,
  ofRoutes,
  . . .
  );

function load (component) {
  return () => import(
    /* webpackChunkName: "[request]" */
    `@/views/${component}.vue`
  )
}

routes.beforeEach((to, from, next) => {
  let currentUser = firebase.auth().currentUser
  let requiresAuth = to.matched.some(record => record.meta.requiresAuth)

  if (requiresAuth && !currentUser) next('login')
  else if (!requiresAuth && currentUser) next('dashboard')
  else next()
})

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
});

1 Ответ

0 голосов
/ 02 января 2019

beforeEach находится на маршрутизаторе. 

let router =  new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
})

router.beforeEach((to, from, next) => {
  let currentUser = firebase.auth().currentUser
  let requiresAuth = to.matched.some(record => record.meta.requiresAuth)

  if (requiresAuth && !currentUser) next('login')
  else if (!requiresAuth && currentUser) next('dashboard')
  else next()
})

export default router

Если вы также хотите поместить beforeEach в свой собственный файл, вы можете импортировать созданный вами маршрутизатор в другой файл и вызвать его там 

import Router from "@/router"

export default () => {
 Router.beforeEach( .... );

}
...