Question

我有一个路由器守卫 beforeEach 路由来观察是否有用户通过身份验证：

import Vue from "vue";
import VueRouter from "vue-router"
import Login from "../views/Login.vue"
import Home from "../components/Home.vue"
import Register from "../views/Register.vue"
import Dashboard from "../views/Dashboard.vue"
import Pricing from "../components/Pricing.vue"
import Invoices from "../components/Invoices.vue"
import { FirebaseAuth } from "../firebase/firebase"

Vue.use(VueRouter);

const routes = [
  {
    path: "*",
    redirect: "/login",
  },
  {
    path: "/dashboard",
    name: "dashboard",
    component: Dashboard,
    children: [
      {
        path: "home",
        name: "home",
        component: Home,
      },
      {
        path: "pricing",
        name: "pricing",
        component: Pricing,
      },
      {
        path: "invoices",
        name: "invoices",
        component: Invoices,
      }
    ],
    meta: {
      auth: true,
    },
    redirect: "home"
  },
  {
    path: "/login",
    name: "login",
    component: Login,
  },
  {
    path: "/register",
    name: "register",
    component: Register,
  }
];

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes
});


router.beforeEach((to, from, next)=>{
  let user = FirebaseAuth.currentUser;
  let auth = to.matched.some(record => record.meta.auth);
  
  if (auth && !user) {

    next('/login');

  } else if (!auth && user) {

    next('/dashboard/home');

  } else{

    next();

  }
});

export default router;

当我执行 logouts 和 logins 时，会出现关于冗余导航的错误，但是，我只是假设如果我只捕获 this.$router.push('/dashboard/home').catch(err => err); 并继续前进而没有 {{1} } 呃。但是在组件 console.log 上创建警报我注意到事情比我想象的更严重，在 created() 上显示警报的组件显示了三遍在 created() 上获取恢复项目，该函数被触发了 3 次，这显然不是想要的性能。

created()

在async created() { alert("created") this.credits = await fetchCredits(this.$firestore, this.$auth.currentUser); let role = await getCustomClaimRole(this.$auth.currentUser); this.subscription = role ? role.charAt(0).toUpperCase() + role.slice(1) + " " + "plan" : "You haven't subscribed yet"; this.isLoading(); },里面是console.log触发了3次

fetchCredits()

我认为问题出在导航守卫上，但是，如果我错了，请纠正我，但是如何解决这个问题？

Answer 1

我认为这与您的路由器路径有关：

  {
    path: "*",
    redirect: "/login",
  },

我已经多次使用 Vue Router，但由于我之前没有使用过通配符，所以我构建了一个简化的 Vue 2 CLI 测试应用程序。

我的路由器：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

import Home from '@/components/stackoverflow/router-wildcard-match/Home'
import RouteOne from '@/components/stackoverflow/router-wildcard-match/RouteOne'
import RouteTwo from '@/components/stackoverflow/router-wildcard-match/RouteTwo'
import WildCard from '@/components/stackoverflow/router-wildcard-match/WildCard'

const routes = [
  {
    path: '/*',
    name: 'wildcard',
    component: WildCard
  },
  {
    path: '/home',
    name: 'home',
    component: Home,
  },
  {
    path: '/routeone',
    name: 'routeOne',
    component: RouteOne,
  },
  {
    path: '/routetwo',
    name: 'routeTwo',
    component: RouteTwo,
  },
]

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

以及我以编程方式路由的导航栏组件：

<template>
  <div class="navbar-sandbox">
    <nav class="navbar navbar-expand-md navbar-light bg-light">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#" @click.prevent="navigate('home')">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#" @click.prevent="navigate('routeone')">RouteOne</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#" @click.prevent="navigate('routetwo')">RouteTwo</a>
        </li>
      </ul>
    </nav>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        //currentRoute: 'home',
        currentPath: 'home'
      }
    },
    methods: {
      // NOTE: Using route names work regardless of having wildcard path
      // navigate(route) {
      //   if (route !== this.currentRoute) {
      //     this.currentRoute = route;
      //     this.$router.push({ name: route });
      //   }
      // },
      navigate(path) {
        if (path !== this.currentPath) {
          this.currentPath = path;
          this.$router.push({ path: path });
        }
      }
    }
  }
</script>

正如您在我的代码注释中所见，当我通过路由名称以编程方式路由时，即使使用通配符路径也能正常工作，但是当我通过实际路由路径路由时，所有路由都被通配符截获。< /p>

我的通配符路径与您的略有不同，/* 与 *。

Vue路由器守卫三重导航

1 个答案: