Возникли проблемы с динамическим обновлением макета Nuxt - PullRequest
Новая
       65

Возникли проблемы с динамическим обновлением макета Nuxt

0 голосов
/ 06 ноября 2019

РЕДАКТИРОВАТЬ: Будет ли лучше создать шаблон для создания макета для страницы, прошедшей проверку подлинности, и перенаправлять после входа в систему, не используя условное выражение на домашней странице, а вместо этого промежуточное ПО, которое перенаправляет неаутентифицированных пользователей на домашнюю страницу?

Я перевел приложение на SSR и прорабатываю детали аутентификации, любые ресурсы или советы по проектированию приветствуются!

Я искал людей, имеющих ту же проблему, и пробовал различные варианты сбезуспешно, поэтому мне было интересно, есть ли у кого-нибудь подсказки, где я могу ошибаться здесь. Заранее спасибо!

Следующий код должен объяснить проблему, с которой я столкнулся. Я использую Nuxt SPA и не могу обновить макет в соответствии с магазином.

console.log ('auth or not') возвращает true, а в моем шаблоне Authenticated = {{isAuth}} также возвращает true.

Дело в том, что я сохраняю код вvscode макет обновляется соответствующим образом, но затем, когда я обновляюсь, он возвращается к значению «по умолчанию», даже если сеанс сохранен, а метод get isAuth возвращает true.

Оффтопические вопросы (не стесняйтесь игнорировать)

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

Вы бы порекомендовали Nuxt для проекта SPA поверх обычного vue, vuex, vue-routerили, по вашему мнению, я должен просто перейти в SSR, так как я в начале проекта.

Это волонтерский проект, поэтому я просто пытаюсь улучшить свои навыки и помочь другу, пока яна него. Будем весьма благодарны за любые учебные материалы! 

 import { fireDb } from '~/plugins/firebaseconfig.js'
    import { mapGetters } from 'vuex'

    export default {
      data () {
        return {
          writeSuccessful: false,
          userLoggedIn: false,
        }
      },
      beforeCreate() {
          console.log('before create')
          let _this = this;
          console.log(sessionStorage);
          Object.keys(sessionStorage).forEach((e, i) => {
          //getting user info from session storage
          if(JSON.parse(sessionStorage[e]).uid) {
            let user = JSON.parse(sessionStorage[e]);

            let userInfo = {
              userEmail: user.userEmail,
              userThumbnail: user.photoURL,
              userName: user.displayName
            };
            _this.$store.commit('userLogin', userInfo)
            console.log('auth or not')
            console.log(this.$store.getters.isAuth);

          }
        })

      },
      computed:
        mapGetters({
          anuncios: 'anuncios/get',
          isAuth: 'isAuth'
        }),
      layout({store}) { return store.getters.isAuth ? 'authenticated' : 'default' },

Извините за длинный пост и еще раз спасибо всем, кто нашел время, чтобы прочитать его!

1 Ответ

0 голосов
/ 06 ноября 2019

После переключения в режим SSR я смог лучше отладить, я подумал, что ловушка beforeCreate вызывается после монтирования компоновки после переключения на SSR, что я должен был осознать, увидев это изображение в документации nuxt. Поэтому я понял, что средство получения состояния isAuth проверялось до того, как аутентификация происходила в beforeCreate, где я должен был проверять sessionStorage.

https://nuxtjs.org/guide/views

Также нашел это, чтобы помочь аутентификации с использованиемпромежуточное программное обеспечение.

https://auth.nuxtjs.org/

Я решил свою проблему, но все еще не уверен в своих шаблонах проектирования, поэтому все еще открыт для критики и, пожалуйста, исправьте меня, если что-то не так с моим ответом!

РЕДАКТИРОВАТЬ

Я нашел пример, который действительно помог мне, если кто-то еще борется с аутентификацией с помощью firebase и nuxt, посмотрите следующий пример Дэвидройера.

https://github.com/davidroyer/nuxt-ssr-firebase-auth.v2

...