VueJS如何实现RouterGaurd

Question

在真实世界的 Vue 应用程序中，路由器很容易达到几百行，所以我将 router.js 拆分为单独的（组件）路由文件并将它们导入 index.js 但是，在这样做的同时，我破坏了 beforEach 功能，我无法弄清楚如何使用重构代码的身份验证保护。

beforeEach 的以下实现使用抛出：

Uncaught TypeError: routes.beforeEach is not a function

任何有关示例的帮助将不胜感激！

我的路线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 () =&gt; import(
    /* webpackChunkName: "[request]" */
    `@/views/${component}.vue`
  )
}

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

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

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

Answer 1

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( ... );
}

VueJS如何实现RouterGaurd

VueJS How to Implement RouterGaurd

vue.js

vue-router

vuejs2