时间戳

首页 > 解决方案 > 使用 firebase v9 在 vue beforeEach 方法中检查所需的身份验证

firebase - 使用 firebase v9 在 vue beforeEach 方法中检查所需的身份验证

问题描述

我想在进入 beforeEach 方法中的某些页面之前检查用户是否存在

我导出用户状态我使用 firebase v9

export const userAuthState = ()=>{
  let currentUser = null;
   onAuthStateChanged(auth, (user) => {
  if (user) {
    currentUser = user;
  }
});
return currentUser;
}

我在这里使用它

 import {userAuthState} from 'src/backend/firebase-config';
...

console.log("before route");
Router.beforeEach(async (to,from,next)=>{
    if(await !userAuthState() && to.meta.requiresAuth){
      next({path: 'login', query:{ redirect: to.fullPath }})
    }else if(await userAuthState() && to.meta.requiresAuth == 'login'){
      next({path:'/'})
    }else{
      next()
    }
  })

这里的问题无法导航到任何页面并多次打印console.log

我如何以正确的方式在路线前检查用户谢谢。

标签： firebasevue.js

解决方案

我会给你一个简单的例子，说明如何根据用户身份验证做出一些决定。

为此，我将使用 Vuex 作为中央存储，因为您通常会在所有应用程序中使用用户信息。我假设您正在使用 Vue 和 Firebase V9 构建一个 SPA。

这是一个简单的用户商店。在您的 main.js 文件（您的入口点文件）中使用 Vue（使用 .use() ）注册此商店。

import { createStore } from 'vuex'
const Store = createStore({
  state() {
    return {
      user: {
       uid: '',
       email: ''
      }
    }
  },
  mutations: {
   setUser (state, payload) {
     if (payload) {
       state.user.uid = payload.uid
       state.user.email = payload.email
       return
     }
     state.user.uid = ''
     state.user.email = ''
   }
  }
})
export Store

现在，在您的App.vue（或您的根组件）中，您onAuthStateChanged可以根据用户的状态简单地调用并运行提交：

<template>
  <div>Your wonderful template...</div>
</template>
<script>
import { onAuthStateChanged } from "firebase/auth";
import { yourAuthService } from 'yourFirebaseInit'
export default {
  name: 'App',
  created () {
    onAuthStateChanged(yourAuthService, (user) => {
       if (user) {
         this.$store.commit('setUser', { uid: user.uid, email: user.email })
       } else {
         this.$store.commit('setUser', null)
       }
    })
  }
}
</script>

最后，在您的路线中，您可以执行以下操作：

// we import the Store that we've created above.
import { Store } from 'your-store-path'
Router.beforeEach((to,from,next)=>{
    if(to.meta.requiresAuth && Store.state.user.uid === ''){
      next({path: 'login', query:{ redirect: to.fullPath }})
    } else{
      next()
    }
  })

这是一个简单的示例，说明如何使用 Vue 和 Firebase V9 实现身份验证流程。

推荐阅读