在 Vue.js/Firebase 登录认证界面设置 route-guard

Posted 2023-02-22

【中文标题】在 Vue.js/Firebase 登录认证界面设置 route-guard

【英文标题】：Setting up route-guard in Vue.js/Firebase login authentication interface

【发布时间】：2019-10-10 12:01:21

【问题描述】：

我正在根据以下教程构建一个基本的 Vue.js/Firebase 身份验证接口：（第 1 部分 - https://medium.com/@oleg.agapov/basic-single-page-application-using-vue-js-and-firebase-part-1-9e4c0c11a228），（第 2 部分 - https://medium.com/@oleg.agapov/basic-single-page-application-using-vue-js-and-firebase-part-2-143a3084266f）。我已经完整地构建了该应用程序，除了路由守卫的某些方面外，它大部分都可以工作。创建帐户后，我能够成功登录并将帐户信息存储在 firestore 数据库中。问题是登录后，手动将“http://localhost:8080/home”重定向到“http://localhost:8080/”会导致主页转换回提示用户注册或登录的登录页面......而用户仍然登录。“http://localhost:8080/”是登录页面的路径，但在用户登录主页时输入“http://localhost:8080/”在逻辑上应该只是重定向到主页。如何进行设置，以便在登录时输入“http://localhost:8080/”返回主页，而不是登录页面？根据教程，这是我的路由：

import Vue from 'vue'
import Router from 'vue-router'
import firebase from 'firebase'

const routerOptions = [
   path: '/', component: 'Landing' ,
   path: '/signin', component: 'Signin' ,
   path: '/signup', component: 'Signup' ,
   path: '/home', component: 'Home', meta:  requiresAuth: true  ,
   path: '*', component: 'NotFound' 
]

const routes = routerOptions.map(route => 
  return 
    ...route,
    component: () => import(`@/components/$route.component.vue`)
  
)

Vue.use(Router)

const router = new Router(
  mode: 'history',
  routes
)

router.beforeEach((to, from, next) => 
  const requiresAuth = to.matched.some(record => record.meta.requiresAuth)
  const isAuthenticated = firebase.auth().currentUser
  if (requiresAuth && !isAuthenticated) 
    next('/signin')
   else 
    next()
  
)

export default router

【参考方案1】：

还有更简单的方法。只需像这样重写您的代码：

router.beforeEach((to, from, next) => 
  const requiresAuth = to.matched.some(record => record.meta.requiresAuth)
  const isAuthenticated = firebase.auth().currentUser
  if(isAuthenticated && to.path === '/') 
    next('/home')
  
  if (requiresAuth && !isAuthenticated) 
    next('/signin')
   else 
    next()
  
) 

选择你喜欢的方式。两者都应该工作

【参考方案2】：

试试这个。更改您的路由器文件。 store 是你的 vuex 文件：

import store from './store'
const routerOptions = [
     path: '/', component: 'Landing',
        beforeEnter(to, from, next) 
            if(store.getters.isAuthenticated) 
                next('/home')
             else 
               next()
            
        
    ,
     path: '/signin', component: 'Signin' ,
     path: '/signup', component: 'Signup' ,
     path: '/home', component: 'Home', meta:  requiresAuth: true  ,
     path: '*', component: 'NotFound' 
]

【讨论】：

感谢您的反馈。我仍然不完全确定如何实施您所描述的内容。如何将其与现有路由器文件集成？我还需要以某种方式导入 Firebase 吗？你能扩展一下吗？

不，您不再需要触摸 Firebase 设置。他们已经很好了。查看您的项目结构。我认为它的 ./src/store/index.js - 你的 vuex 的东西，和 ./src/router/index.js - 你的路由器的东西。您需要从路由器文件中获取您的商店（vuex）数据。如果我对您的项目结构正确，则将第一个字符串更改为 import store from '../store'

我的意思是该教程第二部分的代码：getters: isAuthenticated (state) return state.user !== null && state.user !== undefined