Question

我有一个具有Firebase身份验证的简单路由守卫，但是它无法正常运行。

下面的代码不会呈现任何内容，也不会显示任何控制台错误。

因此，我暂时未在我的应用程序中实现任何身份验证系统，因此，它假定重定向到/ auth路由并显示Auth.vue内容，但不显示任何内容，只是空白页面。 / p>

关于如何解决它的任何想法？

Auth.vue

<template>
  <div class="auth">
    <h1>Auth</h1>
  </div>
</template>

Home.vue

<template>
  <div class="home">
    <h1>Home</h1>
  </div>
</template>

router.js

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import Auth from './views/Auth.vue'
import firebase from 'firebase/app'
import 'firebase/auth'

Vue.use(Router)

let router = new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
      meta: {
        auth: true
      }
    },
    {
      path: '/auth',
      name: 'auth',
      component: Auth
    }
  ]
});

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.auth)) {
    firebase.auth().onAuthStateChanged(function(user) {
      if (!user) {
        next('/auth');
      } else {
        next();
      }
    });
  } else {
    next();
  }
});

export default router

Answer 1

尝试

if(!user) { next({ path: '/auth' }) }

代替

if (!user) { next('/auth'); }

Vue路由器Firebase身份验证防护不起作用

1 个答案: