Nuxt.js如何拿到cookies中的token
我们的阳光沙滩就是把token保存到了cookies里了,现在做成了前后端分离的架构。
前端使用Nuxt.js去编写。Nuxt.js在服务器上把页面渲染。所以就缺少了一浏览器的一些对象,比如说window,我们一般拿cookie,从window中拿。
有些时候,我们需要有token来判断有没有用户,用户是否已经登录了,或者说登录是否有效果
比如说:这是一个问答详情页面,我需要判断当前用户是否有点赞,所以在渲染的时候就需要拿到token了。
如何拿到token呢?
asyncData(context) 当我们通过asyncData去获取数据的时候,有各种参数,参数说明可以看这里nuxt.js asyncData参数有哪些?
context可以打出来,有很多内容,很多信息。
我们可以发现:
req: IncomingMessage {
....
headers: {
host: 'localhost:3000',
connection: 'keep-alive',
'cache-control': 'max-age=0',
'upgrade-insecure-requests': '1',
'user-agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; ' +
'x64) AppleWebKit/537.36 (KHTML, like ' +
'Gecko) Chrome/80.0.3987.122 ' +
'Safari/537.36',
'sec-fetch-dest': 'document',
accept: 'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9',
'sec-fetch-site': 'same-origin',
'sec-fetch-mode': 'navigate',
'sec-fetch-user': '?1',
referer: 'http://localhost:3000/wenda',
'accept-encoding': 'gzip, deflate, br',
'accept-language': 'zh-CN,zh;q=0.9',
cookie: 'Hm_lvt_6c04c2baa03e39986dbbefb4fa0e0c0b=1583152336; ' +
'sobtoken=8012b885abc33472b86a61c6951555a6'
},
这里面的headers,则有cookie了,拿到这个,设置给axios进行请求,那不就可以带上cookies了吗?
okay,我就是这么解决这个问题了,这样子即使服务端渲染,也可以知道用户是否有登录,用户是否有点赞了。
if (context.req && context.req.headers.cookie) {
api.setUpCookie(context.req.headers.cookie)
}
一层一层往下设置
setUpCookie(headers) {
http.setUpCookie(headers);
},
设置给axios
setUpCookie(cookie) {
axios.defaults.headers.cookie = cookie;
},
通常来说我们也需要设置跨域
axios.defaults.withCredentials = true; // 跨域