express框架与vue结合使用,无法保存session内容解决方案
- 问题重现:
使用express框架编写后端接口时,使用中间件判断用户是否登录,将登录信息保存至session中,登陆成功时该接口session能够获取到,访问其他界面时,界面遭受拦截,并且无法获取保存的session信息:
登录接口,当登陆成功保存用户信息至session中
// 登陆
router.post('/login', async (req, res) => {
let arr = [req.body.username, req.body.password]
// 根据用户名和密码判断是否是正确的账号和密码
let sqlStr = `SELECT * FROM user_info WHERE username =? AND password =? AND role_id =1`
let result = await sqlQuery(sqlStr, arr)
if (result.length != 0) {
// 登陆成功
let user = result[0];
req.session.username = user.username
req.session.password = user.password
console.log(req.session);
res.send('登陆成功')
} else {
res.send('登陆失败')
}
})
控制台打印session信息能够获取
判断是否登录中间件
// 判断是否登录中间件
function isLoginMid(req, res, next) {
if (req.session.username == undefined) {
res.send('暂未登录')
} else {
// 已经登陆进入正常界面
next()
}
}
接口使用中间件拦截
中间件成功拦截未登录用户,但已登陆用户也被拦截在外,检查发现session值并没有保存
3. 问题原因:
由于使用vue与express框架相结合,两者的端口号不同,因此需要进行跨域处理,跨域导致session无法成功保存:
4. 解决思路:前端后端进行设置
**前端:**将axios强求的withCredentials设置为true
axios.defaults.withCredentials = true
**后端接口:**配置cors
const corsOptions = {
origin: 'http://localhost:8080',
credentials: true
}
//
// 解决跨域问题
app.use(require('cors')(corsOptions));
问题完美解决!!!!