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

Question

用例：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')

None 工作。

我也试过将 Vue 导入 index.js 文件，但失败了，可能是因为在 Vue3 中你无法将 Vue 导入组件

问题好像是this,Vue和window都是undefined。我也尝试过这里的解决方案

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

求助！

Answer 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

Answer 2

根据 tony19 提供的内容，我找到了另一种适合我的方法。他们删除了 router.app 并且我自己尝试添加它似乎不起作用。所以相反，我只是......从我的 main.js:

中导出了 app 实例

// main.js
export { app };

并在路由器中导入：

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

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

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

Answer 3

这对我有用：

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

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

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

How to get cookie in Vue Router in Vue 3? this undefined in router/index.js

javascript

session-cookies

vue.js

vuejs3