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; // 跨域