Firebase Auth 检查与 Vue-router

Posted

技术标签:

【中文标题】Firebase Auth 检查与 Vue-router【英文标题】:Firebase Auth check with Vue-router 【发布时间】:2019-01-21 03:22:57 【问题描述】:

问题是 vue-router 的 beforeEnter 比 main.js 中的 beforeCreate 钩子更早触发并且有第二个延迟,而在重新加载后 vuex 操作将用户设置为状态。这会导致用户被退回到登录页面。

如何延迟 vue-router 的 beforeEnter 检查,直到 vuex 将授权用户设置为状态。

路由器.js

import Vue from 'vue'
import Router from 'vue-router'
import Home from '../views/Home.vue'
import auth from './auth'

Vue.use(Router)

export default new Router(
  mode: 'history',
  routes: [
    
      path: '/',
      name: 'home',
      component: Home
    ,
    
      path: '/reservations',
      name: 'Reservations',
      component: () => import('@/views/Reservation/Reservations.vue'),
      beforeEnter: auth
    
  ]
)

auth.js

import  store  from "../store";

export default (to, from, next) => 
    if(store.getters.user) 
        next()
     else 
        console.log('auth')
        next('/signin')
    

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router/router'
import store from './store'
import firebase from 'firebase/app'
import 'firebase/app'    
import config from './config'    
    
new Vue(
  router,
  store,
    render: h => h(App),
    beforeCreate() 
        firebase.initializeApp(config).firestore().settings(timestampsInSnapshots: true)
        console.log('main')     
        this.$store.dispatch('authCheck')   
    
).$mount('#app')

存储/user.js

import firebase from 'firebase/app'
import 'firebase/auth'

export default
    state: 
        user: null
    ,
    mutations: 
        setUser (state, payload) 
      state.user = payload
               
  ,
    actions: 
        authCheck( commit ) 
            commit('setLoading', true)
            firebase.auth().onAuthStateChanged((user) =>               
                if(user)
                    commit('setUser', 
                        id: user.uid,
                        name: user.displayName,
                        email: user.email
                    )
                    commit('setLoading', false)
                
            )
        ,      
        logout(commit) 
            firebase.auth().signOut()
            commit('setUser', null)
        
    ,
    getters: 
        user (state) 
            return state.user
        
    

在控制台中,我首先看到 beforeEnter 检查中的“auth”,然后是 beforeCreate 中的“main”。如何在路由器检查之前触发“authCheck”

【问题讨论】:

您可以尝试使用诸如 onauthstatechange 或 currentuser 之类的 Firebase 函数来获取用户实例,而无需使用 Vuex。 【参考方案1】:

在您的 auth.js 文件中,而不是监控商店,您应该等待 authStateChanged 事件,然后当您从 firebase 收到用户时进行处理。

auth.js

export default (to, from, next) => 
  firebase.auth().onAuthStateChanged(function (user)        
    if (user)         
      next();        
    else          
      next('/signin');        
  );

【讨论】:

以上是关于Firebase Auth 检查与 Vue-router的主要内容,如果未能解决你的问题,请参考以下文章

检查用户是否已登录Flutter&firebase auth |

在 Flutter App 的 Firebase Auth 中检查电子邮件是不是已存在

Firebase Auth 和 Swift:检查电子邮件是不是已在数据库中

如何在 Firebase Auth 中检查用户是不是通过 Facebook 登录 [重复]

如何检查用户是不是已使用 Google Sign in 和 Firebase Auth 登录以检索他们的数据?

Auth0 与 Firebase 委托