如何在node和vue以axios作为交互的项目中使用cookie或者set-cookie
最近在用vue+node+mysql重构项目,前端用的vue+typescript写的,后端用的express框架,没有用太多的插件,用原始撸的。 项目地址https://github.com/Vitaminaq/node-mysql 欢迎交流。 刚好有个登陆页面,为了保存用户信息,必须得使用token。之前的思维一直局限在,用户登陆时,生成token,并用放在data...
最近在用vue+node+mysql重构项目,前端用的vue+typescript写的,后端用的express框架,没有用太多的插件,用原始撸的。
项目地址https://github.com/Vitaminaq/node-mysql 欢迎交流。
刚好有个登陆页面,为了保存用户信息,必须得使用token。之前的思维一直局限在,用户登陆时,生成token,并用放在data里面返回来,客户端自己去存储,需要验证的页面把token放在请求的headers的authorization字段里面,后端每次去读这个字段就可以验证了,但是总感觉有点繁琐。样本我也贴一下吧,token我是用的jwt来生成的,至于存在哪里,浏览器那几种方法都还可以。
// 前端代码
axios.create({
baseURL: 'http://127.0.0.1:3005',
timeout: 5000,
headers: {
'Content-Type': 'application/json',
'Cache-Control': 'no-cache',
'authorization': window.sessionStorage.getItem('token')
}
});
后面想到了响应头里面有个set-cookie字段,非常的简便,因为是全自动的,服务器自动把信息存入浏览器的cookie里面,用来记录验证信息非常方便。原生node的语法大致如下:
res.setHeader('Set-Cookie', [`token = ${token};path: '/'; secure: false; signed: false,userId = 1`]);
如果有多个字段,第二个参数可以是数组,结构就是key=value,后面跟一些对cookie配置的属性。
domain | String | Cookie的域名。默认为应用程序的域名 |
encode | Function | 用于cookie值编码的同步函数。默认为encodeURIComponent 。 |
expires | Date | GMT中cookie的到期日。如果未指定或设置为0,则创建会话cookie |
httpOnly | Boolean | 标记cookie只能由Web服务器访问。 |
maxAge | Number | 方便的选项,用于设置相对于当前时间的到期时间(以毫秒为单位)。 |
path | String | Cookie的路径。默认为“/” |
secure | Boolean | 将cookie标记为仅与HTTPS一起使用。 |
signed | Boolean | 指示cookie是否应该签名。 |
sameSite | Boolean or String | “SameSite” Set-Cookie属性的值。更多信息,请访问https://tools.ietf.org/html/draft-ietf-httpbis-cookie-same-site-00#section-4.1.1。 |
这些参数基本是用不太到的,但是大家可以去研究下,有个时候可以会涉及到cookie共享,各级域名间的共享等,就不多提了,世界之大,真要研究,好玩的太多了,一样东西都能腿玩年。
express的语法大概如下(配置字段跟上面是一样的):
// 差不多就是把原生的拆成了单个的,看起来比较清晰。key, value, options,多个值的时候需要多行书写。
res.cookie('token', token, { path: '/', secure: false, signed: false });
res.cookie('nickname', nickname, { path: '/', secure: false, signed: false });
光设置这个是不够的,因为不属于跨域共享资源,所以需要一些设置的支持,客户端由于用了axios,就只说下axios吧。
在它官网上有个详细的请求头参数配置,里面有一个withCredentials字段,大概配置如下:(对于非axios的,其实也差不多,axios只不过是基于http的封装,万变不离其宗,把这个字段加在你的请求头里就ok了)
axios.create({
baseURL: 'http://127.0.0.1:3005',
timeout: 5000,
withCredentials: true, //表示跨域请求时是否需要使用凭证,默认为false
headers: {
'Content-Type': 'application/json',
'Cache-Control': 'no-cache'
}
});
node端也需要进行该配置,大概如下:
app.all('*', function(req, res, next) {
res.header("Access-Control-Allow-Origin", "http://127.0.0.1:8088");
res.header("Access-Control-Allow-Headers", "Content-Type, authorization, Cache-Control");
res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
res.header('Access-Control-Allow-Credentials', 'true'); // 就是这个字段
next();
});
该字段可选。它的值是一个布尔值,表示是否允许发送Cookie。默认情况下,Cookie不包括在CORS请求之中。设为true
,即表示服务器明确许可,Cookie可以包含在请求中,一起发给服务器。这个值也只能设为true
,如果服务器不要浏览器发送Cookie,删除该字段即可。成功登陆的响应头大概如下图,然后后面的请求,请求头里面都会自带这个cookie,无需管理。
到这里差不多就摸索完了,如果觉得问题解决了,欢迎点赞,有什么疑问也可以讨论,欢迎交流。
更多推荐
所有评论(0)