如何使用 Vue + Firebase（Google 身份平台）创建路由保护答案

【问题标题】：How to create a route guard with Vue + Firebase (Google Identity Platform)如何使用 Vue + Firebase（Google 身份平台）创建路由保护
【发布时间】：2020-12-31 09:19:45
【问题描述】：

我已经在我的 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);

理想情况下，我所追求的是类似于 Auth0 在 SDK 示例中提供的内容：

// router/index.js

//...some route
beforeEnter: authGuard()

然后authGuard 将在外部文件中。该文件将包含检查用户是否经过身份验证的功能。然后我可以根据需要将它添加到路由中。

【问题讨论】：

你看看这个tutorial，它显示了一种可能的方法。
@RenaudTarnec 哈哈，我真的刚刚找到了那个教程。重构我的设置以模仿这一点。谢谢。

标签： firebase vue.js firebase-authentication google-identity

【解决方案1】：

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

【讨论】：