Как перенаправить маршрутизатор vue после выхода из firebase? - PullRequest
Новая
       6

Как перенаправить маршрутизатор vue после выхода из firebase?

0 голосов
/ 26 января 2020

Я использую Firebase, FirebaseUI, Vue, vue router и vuex.

  1. У меня есть домашний вид ('/'), который показывает кнопку «Войти» , На данный момент, состояние vuex имеет пользовательскую переменную, установленную в null. Когда я нажимаю на него, я перехожу на страницу входа в систему ('/ login'). Подозрительная вещь: Глядя на Vue DevTools, home остается активным представлением.
  2. Я использую FirebaseUI для обработки своих входов в систему. После успешного входа в систему мой сайт перенаправляется в представление консоли ('/ console'), в котором есть кнопка «Выйти», а переменная пользователя в vuex устанавливается на объект. Подозрительная вещь: Глядя на Vue DevTools, вход в систему теперь является активным представлением.
  3. Нажатие кнопки «Выйти» по-прежнему удерживает меня в '/ console / vue. Vuex имеет переменную пользователя, установленную на ноль.
  4. Обновление страницы автоматически перенаправляет меня в представление '/ login'.

Мне интересно, является ли факт, что активное представление не не правильно root этой проблемы. Я обнаружил, что другие люди с такой же проблемой говорят, что они неправильно использовали веб-пакет, импортировав их файл приложения. vue как js, но я импортирую его как файл. vue в моей главной папке. js file.

Я также с подозрением отношусь к FirebaseUI uiConfig в моем файле Login. vue. Я должен установить signInSuccessUrl: '#/console', (обратите внимание на #). Если у меня нет #, он перенаправляет меня на дом (url = http://localhost: 8081 / console # / ).

Приложение. Vue

<template>
  <v-app>
    <v-content>
      <router-view></router-view>
    </v-content>
  </v-app>
</template>

<script>
export default {
  name: 'App',

  methods: {
    setUser: function() {
      this.$store.dispatch('setUser');
    }
  },
  data: () => ({
    //
  }),
  created () {
    // when the app is created run the set user method
    // this uses Vuex to check if a user is signed in
    // check out mutations in the store/index.js file
    this.setUser();
  },
};
</script>

main. js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import vuetify from './plugins/vuetify'

import { store } from './store/index';

// Firebase App (the core Firebase SDK) is always required and
// must be listed before other Firebase SDKs
import firebase from "firebase/app";

// Add the Firebase services that you want to use
import "firebase/auth";
import "firebase/firestore";

var firebaseConfig = {
  // I'm editing this part out
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

// Check before each page load whether the page requires authentication/
// if it does check whether the user is signed into the web app or
// redirect to the sign-in page to enable them to sign-in
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();
  } else {
    next();
  }
});

// Wrap the vue instance in a Firebase onAuthStateChanged method
// This stops the execution of the navigation guard 'beforeEach'
// method until the Firebase initialization ends
firebase.auth().onAuthStateChanged(function (user) {
  user;
  new Vue({
    el: '#app',
    store,
    router,
    vuetify,
    render: h => h(App)
  });
});

router \ index. js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/about',
    name: 'about',
    component: () => import('../views/About.vue')
  },
  {
    path: '/tryit',
    name: 'tryit',
    component: () => import('../views/TryIt.vue')
  },
  {
    path: '/pricing',
    name: 'pricing',
    component: () => import('../views/Pricing.vue')
  },
  {
    path: '/login',
    name: 'login',
    component: () => import('../views/Login.vue')
  },
  {
    path: '/console',
    name: 'console',
    component: () => import('../views/Console.vue'),
    meta: {    requiresAuth: true   }
  }
]

const router = new VueRouter({
  routes
})

export default router

store \ index. js

import Vue from 'vue';
import Vuex from 'vuex';
import Firebase from 'firebase';

Vue.use(Vuex);

export const store = new Vuex.Store({
  state: {
    user: null
  },
  getters: {
    getUser: state => {
      return state.user;
    }
  },
  mutations: {
    setUser: state => {
      state.user = Firebase.auth().currentUser;
    },
    logoutUser: state => {
      state.user = null;
    }
  },
  actions: {
    setUser: context => {
      context.commit('setUser');
    },
    logoutUser: context => {
      context.commit('logoutUser');
    }
  }
});

Логин. vue

<template>
  <div class="login">
    <NavbarAnon />

    <!-- The surrounding HTML is left untouched by FirebaseUI.
     Your app may use that space for branding, controls and other customizations.-->
    <h1>Welcome to My Awesome App</h1>
    <div id="firebaseui-auth-container"></div>
    <div id="loader">Loading...</div>


  </div>
</template>

<script>
// @ is an alias to /src
import NavbarAnon from '@/components/layout/NavbarAnon';
import 'firebaseui/dist/firebaseui.css';

// Firebase App (the core Firebase SDK) is always required and
// must be listed before other Firebase SDKs
var firebase = require("firebase/app");

// Add the Firebase products that you want to use
require("firebase/auth");
require("firebase/firestore");

var firebaseui = require('firebaseui');

export default {
  name: 'login',
  components: {
    NavbarAnon
  },
  mounted() {
    // Initialize the FirebaseUI Widget using Firebase.
    let ui = firebaseui.auth.AuthUI.getInstance();
    if (!ui) {
      ui = new firebaseui.auth.AuthUI(firebase.auth());
    }

    var uiConfig = {
      callbacks: {
        signInSuccessWithAuthResult: function(authResult, redirectUrl) {
          // User successfully signed in.
          // Return type determines whether we continue the redirect automatically
          // or whether we leave that to developer to handle.
          authResult + redirectUrl;
          return true;
        },
        uiShown: function() {
          // The widget is rendered.
          // Hide the loader.
          document.getElementById('loader').style.display = 'none';
        }
      },
      // Will use popup for IDP Providers sign-in flow instead of the default, redirect.
      signInFlow: 'popup',
      signInSuccessUrl: '#/console',
      signInOptions: [
        // Leave the lines as is for the providers you want to offer your users.
        firebase.auth.GoogleAuthProvider.PROVIDER_ID,
        firebase.auth.EmailAuthProvider.PROVIDER_ID
      ],
      // Terms of service url.
      tosUrl: '<your-tos-url>',
      // Privacy policy url.
      privacyPolicyUrl: '<your-privacy-policy-url>'
    };

    // The start method will wait until the DOM is loaded.
    ui.start('#firebaseui-auth-container', uiConfig);
  }
};
</script>

В панели заголовков. vue (с кнопкой выхода из системы): 

methods: {
      signOutUser() {
        //this.$emit("trying to sign out user");
        firebase.auth().signOut().then(function() {
          // Sign-out successful.
          this.$store.dispatch('logoutUser');
          this.$route.push('/');
        }).catch(function(error) {
          //this.$emit("signout error", error);
          error;
          // An error happened.
        });
      }
    }
...