如何在 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.$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('...'));
【讨论】:
以上是关于如何在 Vue 3 的 Vue Router 中获取 cookie?这个在 router/index.js 中未定义的主要内容,如果未能解决你的问题,请参考以下文章