firebase - Vue路由器firebase auth guard不起作用
问题描述
我有一个带有 firebase 身份验证的简单路由保护,但它不能按预期工作。
下面的代码不会呈现任何内容,也不会显示任何控制台错误。
所以,我现在没有在我的应用程序中实现任何身份验证系统,所以,它假设重定向到 /auth 路由并显示 Auth.vue 内容,但它不显示任何内容,只是一个空白页面。
关于如何解决它的任何想法?
验证.vue
<template>
<div class="auth">
<h1>Auth</h1>
</div>
</template>
主页.vue
<template>
<div class="home">
<h1>Home</h1>
</div>
</template>
路由器.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
解决方案
尝试
if(!user)
{
next({
path: '/auth'
})
}
代替
if (!user) {
next('/auth');
}