如何在 Vue 3 的 Vue Router 中获取 cookie？这个在 router/index.js 中未定义答案

【问题标题】：How to get cookie in Vue Router in Vue 3? this undefined in router/index.js如何在 Vue 3 的 Vue Router 中获取 cookie？这个在 router/index.js 中未定义
【发布时间】：2023-03-26 13:21:02
【问题描述】：

用例：Vue3 应用程序使用 express 作为 API 后端。 Express 使用 express-sessions 建立服务器端会话，该会话发送到浏览器并在每个后续请求中接收。

如果会话 cookie 不存在，我正在尝试创建路由保护以防止访问某些路由。

"vue": "^3.0.11",
"vue3-cookies": "1.0.1",

我已经安装了以下 NPM 包

https://www.npmjs.com/package/vue3-cookies

然后在main.js

import VueCookies from 'vue3-cookies'
app.use(VueCookies);

然后在router/index.js

function requireAuth(to,from,next){
  console.log(this);
  console.log(this.$cookies.get('_ga'))
  next();
}

const routes = [
  {
    path: '/',
    name: 'ProtectedRoute',
    component: ProtectedRoute,
    beforeEnter:requireAuth
  }

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

Error: [Vue Router warn]: Unexpected error when starting the router: TypeError: Cannot read property '$cookies' of undefined

我试过了

this.$cookies.get('_ga')
Vue.$cookies.get('_ga')
window.$cookies.get('_ga')

没有工作。

我也尝试过将 Vue 导入 index.js 文件，但失败了，可能是因为在 Vue3 中你无法将 Vue 导入到组件中Vue.js 3: Cannot import Vue global object

问题好像是this,Vue和window都是undefined。我也试过这里的解决方案`this` undefined in vue-router beforeEach

router.beforeEach((to,from,next) => {
  console.log(router.app); //still undefined!
});

救命！

【问题讨论】：

您到底想达到什么目的？为什么要尝试在 beforeEach 中获取 cookie？
也可能是包的问题，你试过用document.cookie吗？看看它是否输出了什么？
你的上下文有误，我想你可以试试 Vue.$cookies (先导入 Vue)

标签： javascript vue.js session-cookies vuejs3

【解决方案1】：

Vue Router 4 removes router.app，但是你可以在设置路由器的时候自己添加：

// main.js
import router from './router'

const app = createApp(App)

app.use(router)
router.app = app

app.mount('#app')

然后在路由器配置脚本中，您可以使用该引用获取app.config.globalProperties.$cookies（vue3-cookies 添加的全局）：

// router.js
const router = createRouter({
  history: createWebHistory(),
  routes
})

function requireAuth(to, from, next) {
  const { $cookies } = router.app.config.globalProperties
  console.log('_ga', $cookies.get('_ga'))
  next()
}

export default router

demo

【讨论】：

谢谢！这是这样做的正确/Vue方式吗？这似乎有点hacky。
“正确”的方式值得商榷，但我同意它并不理想。将app 附加到router 的Vue Router docs recommend this way，所以我会说这是一种“vue”方式。

【解决方案2】：

根据 tony19 提供的内容，我找到了另一种对我有用的方法。他们删除了router.app，似乎自己尝试添加它不起作用。因此，我只是...从我的 main.js 中导出了 app 实例：

// main.js
export { app };

并在路由器中导入：

// router.js
import { app } from '...'

现在我可以访问应用实例的配置，包括$cookies.get 方法：

console.log(app.$cookies.get('...'))

【讨论】：

【解决方案3】：

这对我有用：

//router.js
import { useCookies } from "vue3-cookies";
const { cookies } = useCookies();

console.log(cookies.get('...'));

【讨论】：