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

Posted

技术标签:

【中文标题】如何在 Vue 3 的 Vue Router 中获取 cookie?这个在 router/index.js 中未定义【英文标题】:How to get cookie in Vue Router in Vue 3? this undefined in router/index.js 【发布时间】:2021-08-19 17:44:20 【问题描述】:

用例: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) 【参考方案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.$cookiesvue3-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('...'));

【讨论】:

以上是关于如何在 Vue 3 的 Vue Router 中获取 cookie?这个在 router/index.js 中未定义的主要内容,如果未能解决你的问题,请参考以下文章

VueJS-3 如何从 vue-router 渲染 <router-view></router-view>?

第3节:vue-router如何参数传递

Vue-Router的使用

vue路由核心要点(vue-router)

vue-router如何去中心化

vue常见面试题(3)