Question

我正在用Rails 6 Api作为后端构建我的第一个Vue-Cli 3项目。

我有一个导航组件，该组件应该在用户成功登录后进行更新，现在当用户登录时，它会重定向到用户仪表板，但导航保持为已记录的导航视图。当我强制刷新页面时，它将成功更改。

对Vue如此陌生可能是一个小问题，但是我正在努力寻找与此问题有关的任何参考。

我正在使用Axios Axios-Vue和JWTSessions处理令牌/会话

这是我的Navigation.vue组件代码：

<template>
  <div class="font-sans antialiased">
    <nav class="flex items-center justify-between flex-wrap bg-loadze-blue p-6 fixed w-full">
      <div class="flex items-center flex-no-shrink text-gray-900 mr-6">
        <span class="font-semibold text-xl tracking-tight text-white">Loadze.co</span>
      </div>
      <div class="block sm:hidden">
        <button @click="toggle" class="flex items-center px-3 py-2 border rounded text-teal-lighter border-teal-light hover:text-white hover:border-white">
          <svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
        </button>
      </div>
      <div :class="open ? 'block': 'hidden'" class="w-full flex-grow sm:flex sm:items-center sm:w-auto">
        <div class="text-sm sm:flex-grow">
          <router-link to="/home" class="no-underline block mt-4 sm:inline-block sm:mt-0 text-teal-lighter hover:text-white mr-4" v-if="!signedIn()">Home</router-link>
          <router-link to="/about" class="no-underline block mt-4 sm:inline-block sm:mt-0 text-teal-lighter hover:text-white mr-4" v-if="!signedIn()">About</router-link>
          <router-link to="/features" class="no-underline block mt-4 sm:inline-block sm:mt-0 text-teal-lighter hover:text-white mr-4" v-if="!signedIn()">Features</router-link>
          <router-link to="/pricing" class="no-underline block mt-4 sm:inline-block sm:mt-0 text-teal-lighter hover:text-white mr-4" v-if="!signedIn()">Pricing</router-link>
          <router-link to="/contact" class="no-underline block mt-4 sm:inline-block sm:mt-0 text-teal-lighter hover:text-white mr-4" v-if="!signedIn()">Contact Us</router-link>
        </div>
        <div>
          <router-link to="/signup" class="text-sm no-underline block mt-4 sm:inline-block sm:mt-0 text-teal-lighter hover:text-white mr-4" v-if="!signedIn()">Sign up</router-link>
          <router-link to="/signin" class="text-sm no-underline block mt-4 sm:inline-block sm:mt-0 text-teal-lighter hover:text-white mr-4" v-if="!signedIn()">Sign in</router-link>
          <a href="#" @click.prevent="signOut" class="text-sm no-underline block mt-4 sm:inline-block sm:mt-0 text-teal-lighter hover:text-white mr-4" v-if="signedIn()">Logout</a>
        </div>
      </div>
    </nav>
  </div>
</template>

<script>
export default {
  name: 'Navigation',
  data () {
    return {
      open: false
    }
  },
  methods: {
    toggle () {
      this.open = !this.open
    },
    setError (error, text) {
      this.error = (error.response && error.response.data && error.response.data.error) || text
    },
    signedIn () {
      return localStorage.signedIn
    },
    signOut () {
      this.$http.secured.delete('/signin')
        .then(response => {
          delete localStorage.csrf
          delete localStorage.signedIn
          this.$router.replace('/')
        })
        .catch(error => this.setError(error, 'Can not sign out'))
    }
  }
}
</script>

<style>

</style>

这是Signin.vue组件（脚本的表单代码很长。如果需要查看，请告诉我）代码：

<script>
export default {
  name: 'Signin',
  data () {
    return {
      email: '',
      password: '',
      error: ''
    }
  },
  created () {
    this.checkSignedIn()
  },
  updated () {
    this.checkSignedIn()
  },
  methods: {
    signin () {
      this.$http.plain.post('/signin', { email: this.email, password: this.password })
        .then(response => this.signinSuccessful(response))
        .catch(error => this.signinFailed(error))
    },
    signinSuccessful (response) {
      if (!response.data.csrf) {
        this.signinFailed(response)
        return
      }
      localStorage.scrf = response.data.csrf
      localStorage.signedIn = true
      this.error = ''
      this.$router.replace('/dashboard')
    },
    signinFailed (error) {
      this.error = (error.response && error.response.data && error.response.data.error) || ''
      delete localStorage.csrf
      delete localStorage.signedIn
    },
    checkSignedIn () {
      if (localStorage.signedIn) {
        this.$router.replace('/dashboard')
      }
    }
  }
}
</script>

Answer 1

您正在使用一个函数进行条件显示（v-if="!signedIn()"），但该函数未返回任何内容，这意味着模板中没有任何反应性渲染。

尝试添加可以在登录时更新的新数据属性：

<template>
  ...
  <div class="text-sm sm:flex-grow">
    <router-link to="/home" v-if="!isSignedIn">Home</router-link>
    <router-link to="/about" v-if="!isSignedIn">About</router-link>
    <router-link to="/features" v-if="!isSignedIn">Features</router-link>
    <router-link to="/pricing" v-if="!isSignedIn">Pricing</router-link>
    <router-link to="/contact" v-if="!isSignedIn">Contact Us</router-link>
  </div>
  ...
</template>

<script>
export default {
  name: 'Signin',
  data () {
    return {
      email: '',
      password: '',
      error: '',
      isSignedIn: false // <= here
    }
  },
  //...
  methods: {
    signin () {
      this.$http.plain.post('/signin', { email: this.email, password: this.password })
        .then(response => {
          this.signinSuccessful(response)
          this.isSignedIn = true // <= and here
        }).catch(error => this.signinFailed(error))
    },
    //...
  }
}
</script>

然后在注销功能中，可以将isSignedIn设置为false。

Answer 2

要使您的localStorage对象具有反应性，它必须是组件数据或计算属性的一部分。最简单的解决方案是将身份验证状态存储在vuex中，然后使用vuex mapGetter将其提供给您的组件。然后，当用户登录时，您可以通过vuex操作更新状态。如果您不熟悉vuex，则可以在其网站上找到一个足以满足此要求的示例。

用户登录成功后导航栏未更新

2 个答案: