koa前后端分离session持久化（koa-mysql-session）

koa+vue 前后端分离登录凭证 （koa-mysql-session）

想用 koa+vue 实现前后端分离，但在这个登录凭证这边卡住不知道怎么继续下去，网上有很多方法，但都是express或者并不是前后端分离的session持久化，并不能完美套用。以下是我现在找到的前后端分离的session持久化的方法，希望能帮到你

node端

app.js

const Koa = require('koa');
const path = require('path');
const mysql = require('mysql');
// 数据库信息
const config = require('./config/default.js');
// 缓存在数据库里面进行进行操作
const MysqlStore = require('koa-mysql-session');
// 创建session缓存
const session = require('koa-session-minimal');
// CORS是一个W3C标准，全称是"跨域资源共享"
const cors = require('koa-cors');
// 路由中间件
const router = require('koa-router');
const route = new router();
// 创建一个Koa对象表示web app本身:
const app = new Koa();

const sessionMysqlConfig = {        //数据库信息
  user: config.database.USER,
  password: config.database.PASSWORD,
  host: config.database.HOST,
  database: config.database.DATABASE,
  // touchAfter:30
  touchAfter:24*3600
};

let cookie = {        // 存放sessionId的cookie配置
  maxAge: 360*12*1000, // cookie有效时长(ms)
  expires: '',  // cookie失效时间
  path: '', // 写cookie所在的路径
  domain: '', // 写cookie所在的域名
  httpOnly: true, // 是否只用于http请求中获取
  overwrite: true,  // 是否允许重写
}

app.use(cors({credentials: true}));      //跨域资源共享
app.use(              //session缓存设置
  session({
    key: 'USER_SID',
    store: new MysqlStore(sessionMysqlConfig),
    cookie: cookie,
  }),
);

app.use(require('./router/vue.js').routes()).use(route.allowedMethods());
// 连接数据库
let connection = mysql.createConnection(sessionMysqlConfig)
connection.connect((err, result) => {
  if (err) {
    console.log("链接失败，数据库服务器未打开")
  }else{
    // 在端口3000监听:
    let server = app.listen(3030, '127.0.0.1', function (req, res) {
      let host = server.address().address;
      let port = server.address().port;
      console.log('Example app listening at http://%s:%s', host, port);
    });
  }
});

引入koa-cors 然后使用 app.use(cors({credentials: true})); 这个极为重要，如果没有这个请求会报错

vue.js

这个文件是对应上面的 ./router/vue.js 文件

var router = require('koa-router')();
var apiModel = require('../lib/sql.js');
var md5 = require('blueimp-md5');
var koaBody = require('koa-body');

// 登录
router.get('/vue/login', async (ctx, next) => {
  // 二次加密
  ctx.query.password = md5(md5(ctx.query.password))
  await apiModel
    .userFind(ctx.query)
    .then(res => {
      ctx.session.token = ctx.query
      let token = new Buffer(JSON.stringify(ctx.query)).toString('base64');
      ctx.body = {
        token:token,
        code: 200,
        message: '登录成功',
      };
    })
    .catch(res => {
      ctx.body = {
        code: 500,
        message: '登录失败',
      };
    });
})

// 首页
router.get('/vue/index',async (ctx, next) => {
  ctx.body = {
    code: 200,
    message: '成功'
  }
})

module.exports = router;

vue 端

http.js

axios.defaults.withCredentials = true
//没有这个没办法实现跨域缓存，其结果就是请求赋值ctx.session后第二次请求ctx.session是为空值

总结

koa-mysql-session 结合 koa-session-minimal 的方法网上应该很多，但他们大部分做的都不是前后端分离的，如果不在 node 引入 koa-cors 然后使用 app.use(cors({credentials: true})); 就没办法跨域会出现报错。vue 端不在 axios 中 加入 axios.defaults.withCredentials = true 就会出现赋值没作用的问题

https://gitee.com/lcai/vue_node_mysql_demo
这里面是项目源码，如果看文字没办法完全懂可以把项目搞下来看下（整个项目暂时还没完成）