如何解决如何使用Vue + FirebaseGoogle Identity Platform创建路由防护
我已经在我的Vue项目中实现了Firebase(又名Google Identity Platform)。我想保护特定的路线,所以添加了以下内容:
// 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已在我的main.js
文件中初始化:
// main.js
// Firebase configuration
var firebaseConfig = {
// Config details redacted
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
理想情况下,我所追求的与在SDK示例中提供的Auth0类似:
// router/index.js
//...some route
beforeEnter: authGuard()
然后authGuard
将在外部文件中。该文件将包含检查用户是否通过身份验证的功能。然后,我可以根据需要将其添加到路由中。
解决方法
使用beforeEach路由器挂钩并检查路由元数据。这是我其中一个应用的示例代码
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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。