Vue.js检查是否设置了cookie而没有页面刷新

Question

此刻我要对VUE进行的操作是，用户登录login url将从导航中消失。

当前，我可以登录并在浏览器中成功设置token cookie。但是问题是，当我不刷新页面时，login url不会从导航栏中消失。这里是一些代码示例：

Login.vue设置cookie并在我登录时将我重定向到home

if(response.status === 200 && response.data.success && response.data.token) {
  const token = response.data.token;
  this.$cookie.set('token', token);
  this.$router.push({name: 'home'});  

然后在Navigation.vue中，我检查cookie是否存在：

<li class="nav-item" v-if="!cookie">
    <router-link class="nav-link" to="login">Login</router-link>
</li>  

data: () => {
    return {
        cookie: Vue.cookie.get('token')
    }
},

因此cookie在登录后仍然存在，但是VUE仅在单击浏览器或f5中的刷新按钮后才知道。我该如何解决，以使login url在登录后立即消失？

这是我的axios配置：

const axiosInstance = axios.create({
    baseURL: 'http://localhost:3000/',
    headers: {'Content-Type': 'application/json'},
    xsrfCookieName: 'XSRF-TOKEN',
    xsrfHeaderName: 'X-XSRF-TOKEN' 
});

axiosInstance.interceptors.request.use(
    config => {
      config.headers['Authorization'] = 'Bearer '+ Vue.cookie.get('token');
      return config;
    },
    error => Promise.reject(error)
  );

编辑

也许我可以用VUEX取得一些成就？

编辑2

所以目前这是我的解决方案： 我添加了VUEX，因此令牌的设置也如下：

  this.$cookie.set('token', token);
  this.$store.state.cookie = this.$cookie.get('token');
  this.$router.push({name: 'home'});

在我的Navbar.vue中，我这样做：

computed: {
    cookie() {
        return this.$store.state.cookie
    }
},

然后像这样检查：

<span v-if="$cookie.get('token') || cookie">
    Log out
</span>
<span v-else>
    <router-link class="nav-link" to="login">Login</router-link>
</span>  

$cookie.get('token') || cookie，因此cookie来自VUEX，它不进行页面刷新就检查它，但是在页面刷新后，VUEX状态消失了。因此，页面刷新后$cookie.get('token')就可以了。

Answer 1

本质上，您想使用某种事件/信号机制来通知不同组件有关cookie值的更改。 Vuex是做到这一点的一种机制。另外，您可以将Vue实例用作事件总线通道：

步骤1：使用event.js文件中的Vue创建事件总线：

import Vue from 'vue';

export const eventBus = new Vue();

步骤2：将其导入Login.vue并在设置cookie时发布事件：

import { eventBus } from './event.js';

// ... Other code
this.$cookie.set('token', token);

// Publish event
eventBus.$emit('tokenSet', token);

步骤3：在Navigation.vue中收听此事件：

import { eventBus } from './event.js';



data() {
    return {
        cookie: Vue.cookie.get('token')
    }
},

created() {
    eventBus.$on('tokenSet', (token) => this.cookie = token);
}

这样，只要触发tokenSet事件，您的cookie就会通过更新来变得被动。这样，您实际上不需要刷新页面，即使刷新了，cookie的初始值也可以由data函数读取。在大型应用程序中，可以使用Vuex或Redux之类的方法，但基本思想仍然相同。

有关更多详细信息，请参见this article。