javascript - Firebase beforeeach() 触发很多次(Vue 应用程序)

标签 javascript firebase vue.js firebase-authentication vue-router

我正在使用 Firebase 和 Vue js 构建帖子应用。我有一些问题: 我的路由器:

import Vue from 'vue'
import Router from 'vue-router'
import Dashboard from '@/components/Dashboard'
import Login from '@/components/Login'
import SignUp from '@/components/SingUp'
import RecentPosts from '@/components/RecentPosts';
import firebase from 'firebase'

Vue.use(Router)

let router = new Router({
  routes: [
   ...... some routes
    {
      path: '/recentPosts',
      name: 'RecentPosts',
      component: RecentPosts,
      meta:{
        requireAuth: true
      }
    }
  ]
})
router.beforeEach((to, from, next) => {
  let currentUser = firebase.auth().currentUser;
  let requiresAuth = to.matched.some(r => r.meta.requiresAuth);
  console.log("CURRENTUSER",currentUser);
  if(!currentUser && requiresAuth) {
    next('Login');
  }else if(currentUser && !requiresAuth) {
    next('Dashboard');
  }else if (currentUser && requiresAuth) {
    next();
  }else {
    next();
  }
});
export default router;

在我转到 /recentPosts 之后,我的函数 beforeeach 触发了很多次,以至于它阻止了我的应用程序。 为什么我无法访问/recentPosts ?我已经登录用户,所以它应该可以解决我的路由问题,但事实并非如此。

else if (currentUser && requiresAuth) {
    next();
}

它应该解析我的“/recentsposts”路线,但事实并非如此

最佳答案

这可能是因为您在 require(s) 处输入错误:

    {
      path: '/recentPosts',
      name: 'RecentPosts',
      component: RecentPosts,
      meta:{
        requireAuth: true     // <- without "s" at the end of require
      }
    }
  ]
})
router.beforeEach((to, from, next) => {
  let currentUser = firebase.auth().currentUser;
  let requiresAuth = to.matched.some(r => r.meta.requiresAuth);   // <- with an "s" at the end of requires

关于javascript - Firebase beforeeach() 触发很多次(Vue 应用程序),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53300065/

相关文章:

javascript - 修改对象后如何获取文本对象字体大小

javascript - 通过 Javascript 设置时无法访问代码隐藏文件中的标签文本

javascript - Webmethod 不适用于 jquery

firebase - 当 Firebase 服务出现故障时,如何收到警报?

ios - 火力地堡, swift : `runTransactionBlock()` returns null

javascript - 为什么我的组件没有导入到 App.vue 中?

javascript - 如何延迟加载 Vue 组件?

javascript - 想要使用 javascript 在 Canvas 中的路径上移动图像

android - 我如何计算 firebase 实时数据库中子节点内的值的总和?

vue.js - 找不到模块 'tailwindcss'