koa2+vue+axios搭建一个博客台管理系统之session踩坑

栏目: jQuery · 发布时间: 6年前

内容简介:我的博客的==koa2-cors:== 用来是设置跨域请求;==koa-session-minimal:== 因为koa本身并不能处理 session,在 koa 中处理 session 需要其他中间件的支持,在网上一番搜索后,发现很多人用的这个,于是我也用了。。。; ==koa-mysql-session:== 用来吧session存到数据库里面

我的博客的 服务端 是采用的koa2 + MySQL, 后台管理界面 采用的是:Vue+ElementUi+axios。这都是些常规组合,没有什么好说的。

二、服务端

==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值,如图:

koa2+vue+axios搭建一个博客台管理系统之session踩坑
koa2+vue+axios搭建一个博客台管理系统之session踩坑

但是,

当我请求其他接口的时候,发现浏览器的请求头里面的cookie不见了!!!,对,没有了。。。不管我发起什么请求,在后端请求里面都拿不到我需要的用户信息

//如果后端拿到了浏览器的cookie
//在后端可以通过
ctx.session.user  //拿到我们登陆成功后设置的用户信息

复制代码

拿到的始终是一个空的 =={}==, 通过去各大搜索引擎搜索发现:==axios默认是不让ajax请求头部携带cookie的==,:anguished:,需要手动设置:

axios.defaults.withCredentials=true;//让ajax携带cookie
复制代码

好吧,:triumph:手动设置就设置吧,也不是什么难事。

设置完后重新登陆。。。

阿西吧!!!!:anger:登不上去了,控制台报错了。。。。

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 冲突,需配置指定的地址:shit::shit::shit::shit:

好吧,咱又去修改之前的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==也能成功拿到用户信息了:smiley::smiley::smiley::smiley::smiley::smiley:


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

爆裂

爆裂

[美] 伊藤穰一、[美] 杰夫·豪 / 张培、吴建英、周卓斌 / 中信出版集团 / 2017-9-1 / 65.00元

越是在发生重大改变的时刻,越是会出现两极分化,赢家、输家有时只在一念间。未来已经装上了全新的操作系统。这是一个重大升级,对我们而言,随之而来的则是陡峭的学习曲线。在指数时代,替换旧逻辑,我们的思维亟需与世界对接,推翻过去已经成为大众所接受的常识,学会差异化思考才能屹立不倒,不被卷入历史的洪流。 在《爆裂》一书中,伊藤穰一和杰夫·豪将这一逻辑提炼为9大原则,帮助人们驾驭这一动荡时刻,应对当下的......一起来看看 《爆裂》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试