时间戳

首页 > 解决方案 > Vuejs检查是否设置了cookie而不刷新页面

javascript - Vuejs检查是否设置了cookie而不刷新页面

问题描述

我现在想用 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')工作之后。

标签： javascriptvue.jscookies

解决方案

本质上，您希望使用某种事件/信号机制来通知不同组件有关 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);
}

通过这种方式，您的 cookie 通过在tokenSet触发事件时进行更新而变得具有反应性。有了这个，你真的不需要刷新页面，即使刷新了，cookie的初始值也会被data函数读取。在大型应用程序中，像 Vuex 或 Redux 是一种可行的方法，但基本思想仍然相同。

有关更多详细信息，请参阅这篇文章。

推荐阅读