首页 > 其他分享 >vue无法获取flask设置的cookie

vue无法获取flask设置的cookie

时间:2022-12-11 19:36:19浏览次数:52  
标签:session vue flask next SESSION cookie result

最近在使用vue3开发基于flask后端的前后端分离项目时候,

设置路由守卫时一直无法获取到登录后的cookie中session值

但是在浏览器中却可以看到cookie

先上代码

router.beforeEach((to, from, next) => {
  if (to.path == '/login') {
    next()
  } else {
    const session = getCookieValue("session")
    console.log('session--->', session)
    if (session) {
      next()
    } else {
      ElNotification({
        title: '错误',
        message: '请重新登录!',
        type: 'error'
      })
      next({path: 'login'})
    }
  }
})
/*
    获取指定名称的cookie值
*/ 
export function getCookieValue(name) {
    let result = document.cookie.match(
      "(^|[^;]+)\\s*" + name + "\\s*=\\s*([^;]+)"
    );
    return result ? result.pop() : "";
  }

 

 

 


 

 

这是因为cookie中的HttpOnly属性是true,这使得我们在浏览器中使用js是无法访问cookie的

只需要在后端设置cookie时将HttpOnly关闭掉就可以了(默认是开启状态)

# flask-session配置
    SESSION_TYPE = "redis"
    SESSION_REDIS = redis.StrictRedis(host=HOSTNAME, port=REDIS_PORT)
    SESSION_COOKIE_HTTPONLY = False  # 使cookie可以被访问
    SESSION_USE_SIGNER = True  # 对cookie中session_id进行隐藏处理
    PERMANENT_SESSION_LIFETIME = 86400  # session数据的有效期,单位秒  24小时

 


 

 


 

OK,问题解决!

标签:session,vue,flask,next,SESSION,cookie,result
From: https://www.cnblogs.com/zhixi/p/16974227.html

相关文章

  • Vue3忽略自定义模板组件提示
    为了在Vue应用程序中使用自定义元素库,必须修改应用程序以定义自定义元素和通知Vue编译器在编译过程中忽略哪些元素。根据同一页面,这可以通过修改Vue实例的配置来实......
  • 使用avue-form-design生成表单
    前言之前玩一些开源项目的时候有简单接触过可视化表单生成工具,也就是avue-form-design,当时重点都放在服务端了,前端的avue-form-design和avue并没有具体细看,这段时间刚好在搞......
  • vue项目day1
    构建项目vuecreatefinance-manager;cdfinance-manager;yarnserve安装依赖[email protected]......
  • DataGear 数据可视化看板整合前端框架Vue
    DataGear看板JS对象的loadUnsolvedCharts()函数,用于异步加载页面端动态生成的图表元素,利用它,可以很方便整合Angular、React、Vue等前端框架。本文以Vue为例,详细介绍如何......
  • vue基础知识
    我们呢,在第一篇笔记中也提到过vue的一个基础,今天的呢也就接着来 首先就是vue,我们需要知道他是怎么个运行,就是有以下这小三点:Node.js是我们的运行环境Vuecli......
  • vue3
    01-为什么学vue3目标:了解vue3现状,以及它的优点,展望它的未来Vue3现状:vue-next(opensnewwindow)2020年09月18日,正式发布vue3.0版本。但是由于刚发布周边生态不支持,......
  • Vue组件间传值(爷传孙,孙传爷)
    爷传孙首先说明:既然你学会了父传子,那么爷传孙自然不是难事,你可以先父传子,再子传孙,一步一步传,这里不再赘述。这里用到的方法是$attrs传参,比起上面的更简洁一些,首先我们还是......
  • 认识 Vue project
    使用Vue-CLI创建项目准备工作下载node和npmnpmcomesbundledwithnode(npm会随node一起被下载)根据个人需求选择一个版本下载即可,对于基本操作来说没有......
  • Vue3学习笔记(四)——组件、生命周期、Hook
    一、组件如果我们将一个页面中所有的处理逻辑全部放在一起,处理起来就会变得非常复杂,而且不利于后续的管理以及扩展,但如果,我们将一个页面拆分成一个个小的功能块,每个功能块完......
  • flask-02
    一、web框架原理0、web框架简单说:就是请求对象和响应对象1、bs架构:B=浏览器、桌面端、小程序、app,   S=服务器2、最开始使用socket写一个服务端,接收的http请求,然后......