javascript - 如何在 vue js 中管理 SPA 上的导航重新渲染

Question

我正在使用 Vue.js 框架构建 SPA。本质上，我在 App.vue 中有一个模板，它包含一个导航，然后在它下面有一个路由器 View 。当用户登录时，我会弹出一个模式并向我的 API 发送登录请求。

我遇到的问题是当用户登录时，我不确定如何重新呈现导航，以便在用户登录后隐藏登录和注册选项。我知道我可以使用 v-if="user"类型的方法，但我不确定如何在登录后从模式中传回这个“user”变量。

App.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 状态。

对于我可以尝试什么或我应该考虑什么来完成此类任务的任何帮助，我将不胜感激。

Answer 1

您需要全局设置用户认证状态。 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 可用于处理隐藏您需要的部分的条件。