Refre sh требуется для определения состояния аутентификации с использованием модуля проверки подлинности nuxt - PullRequest
Новая
       41

Refre sh требуется для определения состояния аутентификации с использованием модуля проверки подлинности nuxt

3 голосов
/ 19 февраля 2020

Мое приложение не может обнаружить изменение состояния, которое происходит при входе пользователя в систему без полного обновления страницы. При обновлении все отображается правильно. Я использую Nuxt и включенный в него модуль аутентификации, описанный здесь - https://auth.nuxtjs.org/.

Вот оператор v-if, который не может обнаружить изменение состояния: 

  <template v-if="$auth.$state.loggedIn">
    <nuxt-link
      to="/profile"
    >
      Hello, {{ $auth.$state.user.name }}
    </nuxt-link>
  </template>
  <template v-else>
    <nuxt-link
      to="/logIn"
    >
      Sign In
    </nuxt-link>
  </template>

Вот метод входа в систему на моей странице входа в систему. 

  methods: {
    async onLogin() {
      try{

        this.$auth.loginWith("local", {
          data: {
            email: this.email,
            password: this.password
          }
        });

        this.$router.push("/");

      }catch(err){
        console.log(err);
      }

    }
  }

Я попытался получить состояние через вычисляемое свойство, но получил тот же результат. Я вижу изменение данных хранилища vuex, указывающее на то, что я правильно вошел в систему или вышел из нее на вкладке «Приложение» в Chrome Dev Tools, но Vue Dev, кажется, постоянно указывает, что я вошел в систему. Не уверен, что его хотя просто глючит ..

Я также сталкиваюсь с той же проблемой в обратном порядке при выходе из системы. Вот метод: 

async onLogout() {
  try{
    await this.$auth.logout();
  }catch(err){
    console.log(err);
  }
}

Я рад предоставить дополнительную информацию.

Ответы [ 2 ]

5 голосов
/ 20 февраля 2020

  1. В store/index.js добавить это: 

     export const getters = {
   isAuthenticated(state) {
   return state.auth.loggedIn
  },
   loggedInUser(state) {
   return state.auth.user
  },
};

  2. На страницах, которые вы предполагаете аутентифицировать

    • использовать промежуточная проверка подлинности как: middleware: 'auth'
    • использование import { mapGetters } from 'vuex'
    • в вычисленном добавлении ...mapGetters(['isAuthenticated', 'loggedInUser']),

  3. , который вы можете использовать loggedInUser для получите данные своего пользователя или проверьте, является ли isAuthenticated

и выйдет ли он из системы, как и ожидалось, до тех пор, пока вы импортируете средства получения карт в вычисленные значения

2 голосов
/ 20 февраля 2020

Иногда система реактивности Vue не срабатывает, и вам просто нужно вручную запустить повторный рендеринг, и самый простой способ сделать это - обернуть вашу функцию logi c в setTimeout()

setTimeout(async () => {
   await this.$auth.logout();
}, 0);
...