如何使用Vue+;Firebase(谷歌身份识别平台)
我已经在我的Vue项目中实现了Firebase(又名Google Identity Platform)。我想保护特定的路由,因此我添加了以下内容:如何使用Vue+;Firebase(谷歌身份识别平台),firebase,vue.js,firebase-authentication,google-identity,Firebase,Vue.js,Firebase Authentication,Google Identity,我已经在我的Vue项目中实现了Firebase(又名Google Identity Platform)。我想保护特定的路由,因此我添加了以下内容: // router/index.js { path: '/profile', name: 'Profile', component: Profile, beforeEnter: (to, from, next) => { if (firebase.
// router/index.js
{
path: '/profile',
name: 'Profile',
component: Profile,
beforeEnter: (to, from, next) => {
if (firebase.auth().currentUser) {
next()
} else {
next({
path: '/login',
})
}
}
},
这很有效但是,如果我对每条路线都这样做,它将变得难以管理
为了使其整洁,我尝试将其放入函数中(在路由文件中,并在外部尝试),但它无法工作,因为Firebase在解析时尚未初始化,因此它会抛出一个错误,称为先初始化Firebase
Firebase在mymain.js
文件中初始化:
// main.js
// Firebase configuration
var firebaseConfig = {
// Config details redacted
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
理想情况下,我所追求的与Auth0在SDK示例中提供的内容类似:
// router/index.js
//...some route
beforeEnter: authGuard()
然后,
authGuard
将位于外部文件中。此文件将包含检查用户是否经过身份验证的函数。然后我可以根据需要将其添加到路由。在每个路由器挂钩之前使用,并检查路由元数据。下面是我的一个应用程序的示例代码
let router = new Router({
routes: [
{path: '*', redirect: "/"},
{
path: "/",
name: 'login',
component: Login
},
{
path: "/register",
name: 'register',
component: Register,
},
{
path: "/home",
name: "home",
component: Home,
meta: {
requiresAuth: true
}
}
]
},
],
mode: 'history'
})
router.beforeEach((to, from, next) => {
let currentUser = firebase.auth().currentUser;
console.log("firebasedata",currentUser);
if (to.matched.some(record => record.meta.requiresAuth)) {
if (!currentUser) {
next({
path: '/login',
query: {redirect: to.fullPath}
})
} else {
if(to.matched.some(record => record.name==='login')){
next({
path: '/home',
query: {redirect: to.fullPath}
})
}
else {
next();
}
}
} else {
next();
}
})
export default router
您可以看看这个,它显示了一种可能的应用方法。@RenaudTarnec哈哈,我刚刚找到了那个教程。重构我的设置以模仿这一点。谢谢