如何使用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