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')可以工作。
回答 1
Stack Overflow用户
发布于 2019-06-18 12:08:28
本质上，您希望使用某种事件/信令机制来通知不同组件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这样的东西是可行的，但是底层的想法还是一样的。
有关更多细节，请参阅这篇文章。
https://stackoverflow.com/questions/56643797
复制相似问题
腾讯云开发者
