Как управлять повторным рендерингом навигации в SPA в vue js - PullRequest
Новая
       4

Как управлять повторным рендерингом навигации в SPA в vue js

0 голосов
/ 10 апреля 2020

Я строю СПА с каркасом Vue. js. По сути, у меня есть шаблон в приложении. vue, который содержит навигацию, а затем вид маршрутизатора под ним. Когда пользователь заходит в систему, у меня появляется модал, который выскакивает и отправляет запрос на вход в мой API.

У меня возникает проблема, когда пользователь входит в систему, я не уверен, как я могу повторно отобразить навигацию так, чтобы после входа в систему параметры входа и регистрации были скрыты. Я понимаю, что мог бы использовать подход типа v-if = "user", но я не уверен, как я могу вернуть эту переменную 'user' обратно из модального режима после входа в систему.

Приложение. vue

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/head_img.png">
      <nav>
        <ul>
          <li><router-link to="/games">All games</router-link></li>
          <li><router-link to="/">Home</router-link></li>
          <li><modal-login>Login</modal-login></li>
          <li><modal-register>Register</modal-register></li>
          <li v-if="user">Logout</li>
        </ul>
      </nav>
      <router-view></router-view>
  </div>
</template>

<script>
import ModalLogin from './components/ModalLogin.vue'
import ModalRegister from './components/ModalRegister.vue'

export default {
  name: 'app',
  components: {
    ModalLogin,
    ModalRegister
  }
}
</script>

Модальный пример 

<template>
    <div>
        <a href="/#register" @click.prevent="show">Register</a>
        <modal name="modal-register" @opened="opened">
            <form @submit.prevent="doRegister">
                <div class="form-group">
                    <label for="email" class="block">Email</label>
                    <input v-model="email" type="email" id="email" name="email" class="border" ref="email">
                </div>
                <div class="form-group">
                    <label for="password" class="block">Password</label>
                    <input v-model="password" type="password" id="password" name="password" class="border">
                </div>
                <div class="form-group">
                    <button type="submit">Register</button>
                </div>
            </form>
            <div class="form-group">
                <p>Already have an account? <a href="#" @click.prevent="showLogin">Login</a></p>
            </div>
        </modal>
    </div>
</template>

В моем запросе у меня есть .then после запроса, чтобы я мог проверьте, что запрос имеет статус 201.

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

1 Ответ

1 голос
/ 10 апреля 2020

Вам необходимо установить статус аутентификации пользователя глобально. Vuex может использоваться для этой цели.

Пример кода 

const state = {
  isAuth: false
}

const mutations ={
  setAuth:(state,value)=>state.isAuth = value
}

const actions = {
  loginRequest:function({commit}){
    // perform login request
    commit('setAuth',true); // call this after you get the login response
  }
}

Внутри компонента добавьте вычисляемую функцию 

computed:{
  isAuth:function(){
    return this.$store.state.isAuth;
  }
}

Теперь isAuth можно использовать для обработка условия, чтобы скрыть нужные разделы.

...