Как создать поток регистрации Vue.js с несколькими представлениями - PullRequest
Новая
       13

Как создать поток регистрации Vue.js с несколькими представлениями

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

Я новичок в веб-разработке и работаю над проектом с Vue.js и Firebase. В настоящее время у меня есть приложение, которое позволяет пользователю войти или зарегистрироваться, а затем после проверки подлинности перенаправляется на страницу HelloWorld по умолчанию. Тем не менее, я пытаюсь добавить дополнительный шаг в мой поток регистрации.

Как это работает в настоящее время:

  1. Пользователь переходит на страницу регистрации (SignUp.vue)
  2. Пользователь вводит информацию в форму. Эта информация используется для создания пользователя в Firebase.
  3. Затем пользователь перенаправляется на Home.vue

Что бы я хотел сделать:

  1. Пользователь переходит на страницу регистрации (SignUp.vue)
  2. Пользователь вводит информацию в форму. Эта информация используется для создания пользователя в Firebase.
  3. Пользователю предоставляется другая форма, где он вводит свой номер телефона (или любые другие данные). Эти данные хранятся в Firestore.
  4. Затем пользователь перенаправляется на Home.vue

В SignUp.vue, как только пользователь проходит аутентификацию в Firebase, я меняю представления с помощью: this.$router.replace('/home')

Тем не менее, замена этого на: this.$router.replace('/phone') для маршрутизации в мою коллекцию телефонов не работает.

Я просто пытаюсь добавить дополнительную страницу в поток регистрации, но не уверен, как настроить мой маршрутизатор Vue для этого. Как он настроен в настоящее время, как только пользователь проходит аутентификацию в Firebase, они автоматически переносятся на домашнюю страницу.

Вот моя конфигурация роутера: 

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

import Home from '@/views/Home';
import Login from '@/views/Login';
import SignUp from '@/views/SignUp';
import Phone from '@/views/Phone';

Vue.use(Router);

const router = new Router({
    routes: [
        {
            path: '*',
            redirect: '/login'
        },
        {
            path: '/',
            redirect: '/login'
        },
        {
            path: '/login',
            name: 'Login',
            component: Login
        },
        {
            path: '/sign-up',
            name: 'SignUp',
            component: SignUp
        },
        {
            path: '/phone',
            name: 'Phone',
            component: Phone
        },
        {
            path: '/home',
            name: 'Home',
            component: Home,
            meta: {
                requiresAuth: true
            }
        }
    ]
});

И здесь я проверяю аутентифицированного пользователя и загружаю представление соответственно в router.js: 

router.beforeEach((to, from, next) => {
    const currentUser = firebase.auth().currentUser;
    const requiresAuth = to.matched.some(record => record.meta.requiresAuth);

    if (requiresAuth && !currentUser) {
        next('login');
    } else if (!requiresAuth && currentUser) {
        next('home');
    } else {
        next();
    }
});

Как настроить маршрутизатор таким образом, чтобы при входе пользователя в существующую учетную запись он сразу переходил на home, а новый пользователь должен посетить дополнительную страницу (phone), прежде чем перейти на home

Заранее спасибо!

...