Vue2中如何在Vue Router内获取cookie？vue-cookies调用返回false求解

算力阿峰

2026-9-27

问题原因

入参错误：window.$cookies.isKey(Cookies)中的Cookies未作为字符串传入，若你未定义同名变量，该入参实际为undefined，自然匹配不到已存在的cookie。
cookie属性不匹配：vue-cookies默认只能读取和当前站点domain、path匹配的cookie，如果你存储的cookie设置了特殊的domain、path，或者带Secure属性但当前站点是http协议，都会导致读取失败。
HttpOnly限制：如果目标cookie设置了HttpOnly属性，前端JS（包括所有第三方插件）都无法读取，这是浏览器的原生安全策略。
路由守卫语法错误：代码中else { next(); } { next(); }存在冗余的代码块，虽然不直接影响cookie读取，但会导致路由跳转逻辑异常。

解决方案

修正isKey方法的入参，将需要查询的cookie键名改为字符串格式，和浏览器中存储的cookie键名完全一致（区分大小写），示例：

// 假设要查询的cookie键名为current_user，替换为你实际的键名
const currentUser = window.$cookies.isKey('current_user');

统一cookie的存储配置，在main.js中注册vue-cookies时设置全局默认属性，保证读写的cookie属性一致：

import Vue from "vue"
import VueCookies from 'vue-cookies'
import App from "./App.vue"
Vue.use(VueCookies)
// 新增配置：过期时间7天，path为/，domain为当前域名，生产环境开启Secure
Vue.$cookies.config('7d', '/', window.location.hostname, process.env.NODE_ENV === 'production')
new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount("#app");

确认目标cookie未设置HttpOnly属性，如果是后端写入的鉴权cookie建议由后端接口校验登录状态，不要依赖前端读取cookie做校验，避免安全风险。
修正路由守卫的语法错误，清理冗余代码，修正后代码如下：

router.beforeEach((to, from, next) => {
  const currentUser = window.$cookies.isKey('your_cookie_key'); // 替换为实际键名
  console.log(currentUser);
  if (to.matched.some((record) => record.meta.requiresAuth)) {
    if (!currentUser) {
      window.location.href = "https://localhost";
    } else {
      next();
    }
  } else {
    next();
  }
});

内容的提问来源于stack exchange，提问作者RedFlower