Vue.js аутентификация после ручного ввода URL

Question

В моем массиве routes в main.js я установил

meta : { requiresAuth: true }

для каждого компонента, кроме страницы UserLogin.

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

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

    console.table({ currentUserState, requiresAuth });

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

При такой настройке все работает почти так, как ожидается / запланировано.Зарегистрированные пользователи могут отправиться куда угодно, а анонимные пользователи будут перенаправлены на localhost/login.

Однако эта проверка и перенаправление работают только при переходах пользователей по ссылкам в веб-приложении (которые все <router-link>).s go :to="{ name: 'SomeComponent' }".

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

Из вывода console.table я вижу, что ручной ввод URL всегда приводит к тому, что currentUserState имеет значение false.

Оно не остается ложным: пользователь, вошедший в систему (currentUserState === true), который затемгде-то перемещается вручную (currentUserState === false), currentUserState возвращается к true

Я могу только смутно догадываться, что проблема связана с рендерингом и firebase.auth().

Answer 1

Я нашел решение этой ошибки.

В моем Vuex store.js снимок состояния сохраняется в localStorage.Этот моментальный снимок обновляется каждый раз, когда происходит изменение самого хранилища, поэтому резервная копия localStorage всегда соответствует текущему состоянию самого приложения Vue.js.

store.subscribe((mutation, state) => {
  localStorage.setItem('store', JSON.stringify(state));
});

Это store.subscribe устанавливается в моем store.js непосредственно перед строкой экспорта.

Функция с именем initStore также определяется в хранилище следующим образом

initStore(state) {
  if (localStorage.getItem('store')) {
    this.replaceState(Object.assign(state, JSON.parse(localStorage.getItem('store'))));
  }
},

и после моего объекта хранилища онанемедленно вызывается с store.commit('initStore').

Answer 2

firebase.initializeApp(config)

// you need to let firebase try and get the auth state before instantiating the 
// the Vue component, otherwise the router will be created and you haven't 
// resolved whether or not you have a user

firebase.auth().onAuthStateChanged(function(user) {
    app = new Vue({
      el: '#app',
      template: '<App/>',
      components: { App },
      router
    })
});