Node.js结合session实现Vue项目中用户登录状态管理

首先在node项目的入口文件中导入 express-session 包

//这是我的入口文件，index.js
const session = require('express-session')   //引入包

然后配置session

//配置session
app.use(session({
    secret: 'keyboard cat',  //一个 String 类型的字符串，作为服务器端生成 session 的签名。
    resave: false,           //强制保存 session 即使它并没有变化,。默认为 true。建议设置成 false。
    cookie: { maxAge: 600000 }, //cookie的有效时间
    saveUninitialized: false, //强制将未初始化的 session 存储，在未保存session状态时就已经存在，这里设为false，也可以设置为true
}))

用axios发送网络请求

  axios.post('http://127.0.0.1:8080', { name: '孙悟空', age: 999 }).then((data) => {
        console.log(data)
         })

后台接到响应，开始保存session

app.post('/', (req, res) => {
    console.log(req.body)
    req.session.user = req.body
    res.send('ok')
})

结果控制台可以正常打印数据，但是cookie为空

响应.JPG

cookie.JPG

这是因为axios在跨域请求时是不会携带浏览器的cookie，所以node无法写入cookie，需要配置axios，将withCredentials设为true，再次发送请求

 axios({
            method: 'post',
            url: 'http://127.0.0.1:8080',
            data: { name: '孙悟空', age: 999 },
            withCredentials: true,
          }).then((data) => {
            console.log(data.data)
          })

这时会有跨域问题的报错是因为响应中“ Access-Control-Allow-Origin”标头的值不得为通配符"*"

跨域.JPG

需要引入另一个包 cors，并配置

const cors = require('cors');

var corsOptions = {
    origin: 'http://127.0.0.1:5500',  //这是发出请求的地址
    credentials: true,
}
app.use(cors(corsOptions))

修改对跨域请求的处理

app.all('*', function (req, res, next) {
    res.header('Access-Control-Allow-Origin', req.get("Origin"));
    res.header('Access-Control-Allow-Headers', 'credentials,Content-Type, Content-Length, Authorization, Accept, X-Requested-With, token');
    res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
    //若要返回cookie、携带seesion等信息则将此项设为true。此时Access-Control-Allow-Origin不能设置为*
    res.header("Access-Control-Allow-Credentials", "true");
    next();
});

然后再来发送网络请求，这时可以看到cookie已被写入

cookie2.JPG

这时再增加一个get请求，用来请求session保存的值

 axios({
            method: 'get',
            url: 'http://127.0.0.1:8080',
            withCredentials: true,
          }).then((data) => {
            console.log(data.data)
          })

node中新增一个路由，用来返回session解析后的值

app.get('/', (req, res) => {
    console.log(req.session.user)
    res.send(req.session.user)
})

然后重新发送post请求再发送get请求(我这里用到两个按钮)

发送post请求：cookie被写入

cookie3.JPG

发送get请求：浏览器控制台打印session解析后的值

浏览器控制台.JPG

刷新浏览器，然后重新发送get请求，数据依然存在

刷新.JPG

关闭浏览器重新打开项目直接发送get请求，数据依然存在

重新打开.JPG