Настройка route-guard в интерфейсе аутентификации входа в систему Vue.js / Firebase - PullRequest
Новая
       15

Настройка route-guard в интерфейсе аутентификации входа в систему Vue.js / Firebase

1 голос
/ 24 мая 2019

Я создаю базовый интерфейс аутентификации 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). Я создал приложение полностью ив основном это работает, за исключением некоторых аспектов route-guard. После создания учетной записи я могу успешно войти в систему и сохранить информацию об учетной записи в базе данных firestore. Проблема заключается в том, что после входа в систему происходит ручное перенаправление «http://localhost:8080/home" в "http://localhost:8080/" вызывает переход домашней страницы обратно на целевую страницу, которая предлагает пользователю либо зарегистрироваться, либо войти ... пока пользователь еще вошел в систему." http://localhost:8080/" - это маршрут для целевой страницы, но ввод "http://localhost:8080/" при входе пользователя на домашнюю страницу должен логически просто перенаправить на домашнюю страницу. Как я могу настроить это так, чтобы ввод" http://localhost:8080/" пока logged возвращает меня на домашнюю страницу, а не на целевую страницу? Вот что у меня есть для моей маршрутизации на основе учебника: 

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

Ответы [ 2 ]

1 голос
/ 24 мая 2019

Есть еще более простой способ. Просто перепишите свой код так: 

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()
  }
})

Выберите, как вам нравится. Оба должны работать

0 голосов
/ 24 мая 2019

Попробуй это.Измените свой файл роутера.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' }
]
...