Почему когда я обновляю страницу меня перекидывает на страницу авторизации?

Всем привет
Я использую для своего Vue приложения Firebase.

Когда я перезагружаю страницу, меня всегда перекидывает на страницу авторизации.
Я нашла вот такое решение:

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import "@/firebase/firebase.js";
import { auth } from "@/firebase/firebase.js";

import Varlet from "@varlet/ui";

import "@/main.scss";

let app;
auth.onAuthStateChanged(() => {
  if (!app) {
    const app = createApp(App);

    app.use(store);
    app.use(router);

    app.mount("#app");
  }
});


Проблема с перенаправлением на страницу авторизации пропала. Но когда я авторизуюсь и роутер перенаправляет меня на домашнюю страницу, то приложение пустое. То есть в app ничего нет.
Только после перезагрузки страницы, там появляются данные. Но после перезагрузки, появляется новая проблема:

Когда я обновляю страницу, вывод данных в зависимости от того авторизован ли пользователь работают неправильно:

<div v-if="!isAuthenticated">
  <router-link to="/login">
    Login
  </router-link>
</div>
<div v-else>
<router-link to="/login" @click="logout">
   Logout
</router-link>
</div>


import { mapState } from "vuex";
export default {
computed: {
...mapState(["isAuthenticated"]),
},
methods: {
logout() {
this.$store.dispatch("logout");
},
},
};


Store:
import { createStore } from "vuex";
import * as fb from "../firebase/firebase";
import router from "../router/index";

export default createStore({
  state: {
    userProfile: {},
    isAuthenticated: false,
  },
  mutations: {
    setUserProfile(state, val) {
      state.isAuthenticated = !state.isAuthenticated;
      state.userProfile = val;
    },
  },
  actions: {
    async login({ dispatch }, form) {
      const { user } = await fb.auth.signInWithEmailAndPassword(
        form.email,
        form.password
      );
      dispatch("fetchUserProfile", user);
    },
    async fetchUserProfile({ commit }, user) {
      const userProfile = await fb.usersCollection.doc(user.uid).get();
      commit("setUserProfile", userProfile.data());
      router.push("/");
    },
    async logout({ commit }) {
      await fb.auth.signOut();
      commit("setUserProfile", {});
      router.push("/login");
    },
  },
  modules: {},
});


Подскажите, пожалуйста, в чем проблема?
  • Вопрос задан
  • 234 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы