Как перенаправить пользователя на домашнюю страницу, если пользователь имеет аутентификацию c, т.е. ID или ПАРОЛЬ правильный в vue. js с использованием состояния VUEX STORE? - PullRequest
Новая
       68

Как перенаправить пользователя на домашнюю страницу, если пользователь имеет аутентификацию c, т.е. ID или ПАРОЛЬ правильный в vue. js с использованием состояния VUEX STORE?

0 голосов
/ 04 августа 2020

Я устанавливаю аутентичность пользователя в состоянии VUEX Store, если идентификатор пользователя и пароль действительны. Но как мне получить доступ к этому в моем входе. vue для перенаправления?

Если пользователь действителен, установите для состояния хранилища VUEX, т.е. isUserAuthenti c значение true. Для этого я использовал вычисленные свойства. чтобы получить состояние пользователя, т.е. isUserAuthenti c, и обойтись без hasUserSignedIn в вычисляемых свойствах. Я проверяю, является ли пользователь authenti c, затем перенаправляю и возвращаю undefined из этих вычисленных свойств. Так что я могу использовать это в HTML и не влиять на HTML, потому что я возвращаю undefined из этих вычисленных свойств. Он работает, но это не идеально / передовой опыт.

Вход. vue

<template>
    <section>
        <div class="form-wrapper">

            //--------------------------------------USING COMPUTED PROPERTIES
            {{ hasUserSignedIn }}
            
            <input v-model="email"/>
            <input v-model="password"/>

            <button class="btn-signin" @click="submit()">
                sign in
            </button>
        </div>
    </section>
</template>

<script>
import { mapGetters } from 'vuex';

export default {
  data() {
     email: '',
     password: '',
  },
  methods: {
    submit() {

      if (this.email && this.password) {
        this.$store.dispatch('signInUser', { email: this.email, password: this.password });
      }
    },
    redirectTohome() {
      this.$router.push({ path: '/home' });
    },
  },

  computed: {
    ...mapGetters(['isUserAuthentic']),

    //-----------------------------------------WORKAROUND COMPUTED PROPERTIES
    hasUserSignedIn() {
      if (this.isUserAuthentic) {
        this.redirectTohome();
      }
      return undefined;
    },
  },
};
</script>

Вход в VUEX. js

import Vue from 'vue';
import axios from 'axios';

// const URL = 'http://localhost:3000';

const state = {
  signInLoading: false,
  isUserAuthentic: false,
};

const getters = {
  isSignInLoading: (signInState) => signInState.signInLoading,
  isUserAuthentic: (signInState) => signInState.isUserAuthentic,
};

const mutations = {
  SET_SIGNIN_LOADING_STATUS(signInState, status) {
    signInState.signInLoading = status;
  },
  SET_USER_AUTHENTICITY(signInState, isAuthentic) {
    signInState.isUserAuthentic = isAuthentic;
  },
};

const actions = {
  async signInUser({ commit }, payload) {
    // SET LOADING STATUS TRUE
    commit('SET_SIGNIN_LOADING_STATUS', true);

    try {
      // AUTHORIZE USER WITH AXIOS
      const response = await axios.post(`${URL}/api/v1/user/signin`, payload);

      // IF USER IS AUTHENTIC, SET AUTHENTIC STATUS TO TRUE
      if (response.status === 200) {
        commit('SET_USER_AUTHENTICITY', true);
      }
    } catch (e) {
      // SEND TOAST NOTIFICATION TO USER FOR INVALID REQUESTS
      if (e.response && e.response.data.message) {
        Vue.$toast(e.response.data.message, {
          type: 'info',
          timeout: 8000,
        });
      } else {
        Vue.$toast('Something went wrong, Please try again.', {
          type: 'error',
          timeout: 8000,
        });
      }
    }

    // SET LOADING STATUS FALSE
    commit('SET_SIGNIN_LOADING_STATUS', false);
  },
};

export default {
  state,
  getters,
  mutations,
  actions,
};

Ответы [ 2 ]

0 голосов
/ 04 августа 2020

Я прочитал документацию и думаю, что СМОТРИТЕЛИ намного лучше, чем ВЫЧИСЛИВАЕМЫЕ в данном конкретном случае.

В этом подходе нам не нужно использовать { {hasUserSignedIn}} в HTML. Просто наблюдайте за свойством, и когда оно истинно, перенаправляйте его домой. 

 watch: {
    isUserAuthentic(val) {
      if (val) {
        this.redirectTohome();
      }
    },
  },

Если у кого-то есть лучшее решение, добро пожаловать

0 голосов
/ 04 августа 2020

Вы в значительной степени на высоте. Единственное, что, как мне кажется, вы должны сделать, - это дождаться, пока обещание отправки магазина ('signInUser') разрешится, и проверит состояние isUserAuthentic. Примерно так:

Войти. vue

<script>
import { mapGetters } from 'vuex';

export default {
  data() {
     email: '',
     password: '',
  },
  methods: {
    async submit() { // use the 'async' keyword so that you can use await

      if (this.email && this.password) {
        await this.$store.dispatch('signInUser', { email: this.email, password: this.password }); // wait for the signInUser action to complete
        if (this.isUserAuthentic) {
          this.redirectTohome();
        }
      }
    },
    redirectTohome() {
      this.$router.push({ path: '/home' });
    }
},
  },

  computed: {
    ...mapGetters(['isUserAuthentic']), // mapState will be better here since you don't alter the state
  },
};
</script>
<template>
...
    {{ isUserAuthentic }}
 ...
</template>

Кроме того, я считаю, что вы должны запустить фиксацию, т.е. commit('SET_USER_AUTHENTICITY', false);, когда происходит сбой. Этого нет в вашем коде.

Поскольку вы возвращаете состояние как есть, а не изменяете его, mapState будет лучше, чем mapGetters в вашем случае.

...