Question

我在vuejs app vuex商店中有以下操作：

 import { HTTP } from '@/services/http'
import router from '@/router'

export const actions = {
  loginUser ({ commit }, params) {
    HTTP.post('v1/login.json', { email: params.email, password: params.password })
    .then(response => {
      localStorage.setItem('access_token', response.data.token)
      router.push({name: 'Hello'})
    }).catch(error => {
      commit('SET_LOGIN_ERROR', error.response.data.error)
    })
  },

  myAccount ({ commit }, params) {
    HTTP.get('v1/my_account.json', { headers: {'Authorization': 'Token token=' + localStorage.getItem('access_token')} })
    .then(response => {
      commit('SET_USER', response.data)
    })
  },

  logout ({ commit }, params) {
    HTTP.delete('v1/logout.json', { headers: {'Authorization': 'Token token=' + localStorage.getItem('access_token')} })
    .then(response => {
      localStorage.removeItem('access_token')
      commit('SET_USER', {})
    })
  }
}

以及以下导航组件：

<template>
  <div>
    {{user.first_name}}
    {{user.last_name}}
    {{user.email}}
    <button v-on:click="logout()" v-if="Object.keys(user).length !== 0">Logout</button>
  </div>
</template>

<script>
  import { mapActions, mapGetters } from 'vuex'

  export default {
    name: 'hello',
    methods: {
      ...mapActions(['myAccount', 'logout'])
    },

    beforeMount: function () {
      if (localStorage.getItem('access_token')) {
        this.myAccount()
      }
    },

    computed: {
      ...mapGetters(['user'])
    }
  }
</script>

此组件安装在App.Vue：

中

<template>
  <div id="app">
    <navigation></navigation>
    <router-view></router-view>
  </div>
</template>

<script>
  import Navigation from './components/Navigation.vue'

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

问题在于：

我访问登录页面并输入有效的电子邮件和密码。
我被重定向到根路径。 Naviagation组件应该从api检索用户数据，但它不会这样做。
当我使用F5刷新页面时，导航组件可以正确获取数据。

我该如何解决？

Answer 1

您的access_token可能未设置且组件进入beforeMount之前和之后重新加载时，您已经在localstorage中拥有访问令牌，因此它正在运行。 localStorage.setItem是同步的，但您可能可以通过承诺解决这个问题。我没有测试过这个，但它应该可以工作。

setItem: function (key, value) {
    return Promise.resolve().then(function () {
        localStorage.setItem(key, value);
    });
}

然后在解决的api登录调用

中调用此函数

setItem('access_token', response.data.token).then(function () {
    return router.push({name: 'Hello'})
});

重定向后不会获取数据

1 个答案: