vue express-session踩坑（设置session后每次请求都刷新问题（无法记录登录状态问题）

最新推荐文章于 2022-04-22 22:22:49 发布

原创最新推荐文章于 2022-04-22 22:22:49 发布 · 2.3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#session #vue #cookie

解决Vue项目中使用express-session保持登录状态的问题，通过调整session配置及前端axios请求携带cookie，确保跨请求登录状态有效。

vue express-session踩坑（设置session后每次请求都刷新问题（无法记录登录状态问题））

首先先定义你的session

app.use(session({
    secret:"chh",
    cookie:{
        maxAge:60*1000*30,
        secure:false
    },
    resave:false,//及时session没有被修改，也保存session的值
    saveUninitialized:false //无论有没有session cookie ，每次请求都设置个session cookie
}))

然后在登录表单验证成功之后保存登录状态：

router.post('/login', (req, res)=>{
    let userModel = new user();
    userModel.Login(req.body,function(results){
        if(results.code==100){//保存登录状态
            req.session.login=true
            req.session.name=req.body.UserName
        }
        console.log(req.session)//在这里打印有session保存的login和name值
         res.send(results);
    })
})

控制台打印的保存的login值↓

Session {
  cookie: {
    path: '/',
    _expires: 2020-04-17T06:48:01.784Z,
    originalMaxAge: 1800000,
    httpOnly: true,
    secure: false
  },
  login: true,
  name: '8888'
}

但是在登录之后的主页面却得不到当时保存的login=true

app.use('/index', (req,res,next)=>{
    console.log(req.session)
    next()
},indexRouter);

控制端显示↓（没有login=true的值）(而是重新定义了session)

Session {
  cookie: {
    path: '/',
    _expires: 2020-04-17T06:47:47.444Z,
    originalMaxAge: 1800000,
    httpOnly: true,
    secure: false
  }
}

查找了很多资料终于找到在前端用axios发起请求还需在vue的main.js中加一个参数

axios.defaults.withCredentials=true;

这样就可以每次像后端请求都带上cookie，后端就不会被认为是不同用户导致session丢失