koa2+vue+axios搭建一個博客臺管理系統之session踩坑

原文發佈在個人我的博客：http://www.brandhuang.com

下面就開始個人表演

1、先說一下我博客管理系統和服務端用到的東西

個人博客的服務端是採用的koa2 + MySQL，後臺管理界面採用的是：Vue+ElementUi+axios。這都是些常規組合，沒有什麼好說的。

2、服務端

==koa2-cors：== 用來是設置跨域請求；

// 官方推薦配置
var Koa = require('koa');
var cors = require('koa2-cors');
 
var app = new Koa();
app.use(cors());

==koa-session-minimal：== 由於koa自己並不能處理 session，在 koa 中處理 session 須要其餘中間件的支持，在網上一番搜索後，發現不少人用的這個，因而我也用了。。。；
==koa-mysql-session：== 用來吧session存到數據庫裏面

// 這兩個模塊用法

const session = require('koa-session-minimal');
const MysqlStore = require('koa-mysql-session');
// session存儲配置
const sessionMysqlConfig= {
    user: config.database.USERNAME,
    password: config.database.PASSWORD,
    database: config.database.DATABASE,
    host: config.database.HOST,
}

// 配置session中間件
app.use(session({
    key: 'USER_SID',
    store: new MysqlStore(sessionMysqlConfig),
    cookie: {                   // 與 cookie 相關的配置
        domain: 'localhost',    // 寫 cookie 所在的域名
        path: '/',              // 寫 cookie 所在的路徑
        maxAge: 1000 * 300,      // cookie 有效時長
        httpOnly: true,         // 是否只用於 http 請求中獲取
        overwrite: false        // 是否容許重寫
    }
}))

一切準備就緒，開始試試session吧

1. 在輸入正確的用戶名和密碼後，先設置一下session的信息

ctx.session = {
     user: res[0]['account'],
     id: res[0]['id']
}

此時，咱們能看到在數據庫和瀏覽器的登錄請求中已經有了session值，如圖：
::: hljs-center

:::

可是
當我請求其餘接口的時候，發現瀏覽器的請求頭裏面的cookie不見了！！！，對，沒有了。。。無論我發起什麼請求，在後端請求裏面都拿不到我須要的用戶信息

//若是後端拿到了瀏覽器的cookie
//在後端能夠經過
ctx.session.user  //拿到咱們登錄成功後設置的用戶信息

拿到的始終是一個空的 =={}==，
經過去各大搜索引擎搜索發現：==axios默認是不讓ajax請求頭部攜帶cookie的==,，須要手動設置：

axios.defaults.withCredentials=true;//讓ajax攜帶cookie

好吧，手動設置就設置吧，也不是什麼難事。

設置完後從新登錄。。。
阿西吧！！！！登不上去了，控制檯報錯了。。。。

Failed to load http://localhost:3500/login: Response to preflight request doesn't pass access control check: 
The value of the 'Access-Control-Allow-Credentials' header in the response is '' which must be 'true' when the request's credentials mode is 'include'.
 Origin 'http://localhost:8080' is therefore not allowed access. 
The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

怎麼又跨域了？！！以前不是設置了容許跨域請求嗎？？？
。。。我們繼續上搜索引擎找找去。。。

header信息 Access-Control-Allow-Credentials:true
Access-Control-Allow-Origin不能夠爲 ' '，由於 '' 會和 Access-Control-Allow-Credentials:true 衝突，需配置指定的地址

好吧，咱又去修改以前的cors的配置

// 修改前
app.use(cors())
//  修改後以下
app.use(cors({
    origin: [ 'http://localhost:8080'], // 容許這個域名的 跨域請求
    exposeHeaders: ['WWW-Authenticate', 'Server-Authorization'],
    maxAge: 5,
    credentials: true,
    allowMethods: ['GET', 'POST', 'DELETE'],
    allowHeaders: ['Content-Type', 'Authorization', 'Accept'],
}));

設置後終於能夠正常登錄了，經過==ctx.session==也能成功拿到用戶信息了

緊接着，另外一個問題又誕生了

個人服務端是前端和後臺管理系統共用的。他們呢在不一樣的端口。。。可是這個跨域只容許設置一個域名。。。，

無論了，先睡覺，小命要緊，明天再來！

不整了，已經用jwt，基於token驗證方式了，不用糾結請求攜帶cookie時的跨域的問題了