cookie-universal 踩坑两枚

最近处理 nuxt 同构应用的权限问题，用 cookie-universal-nuxt 来进行 cookie 操作，遇到一点恼人的问题，现记录如下供参阅。

问题一：

服务端请求端口返回401权限错误

线索：

• 服务端请求时会自己带上奇怪的token，此时 document.cookie 中并无token，这个奇怪的token哪来的？
• 观察发生的时机，发现 401 在 QQ 第三方登陆后回跳网站后的 nuxtServerInit 中发生，此时 token 通过 $cookies.get('token') 取得
• 查看 cookie-universal 源码发现服务端的 cookie 是通过 req.headers.cookie 获得的
• 查看 QQ 登陆后回跳的 Doc 请求，发现 req 的 cookie 中有 token，应该是qq网站的token，却带过来被我获取当做了自己的 token 用

解决：
改token名，token太通用了，改成udm_token

问题二：

依然存在返回401问题，具体时机为登录后在个人中心页刷新，接口返回401，在其它页面刷新不会

线索：

• 查看刷新时的 Doc 请求，发现带了两个 udm_token，服务端取第一个来用，而第一个是过期了的。
• 在网络中查看请求的两个 udm_token，发现是两个 path 下的，path 一个是 "/" 一个是 "my/"
• 个人中心页地址是 /my/account，其它的页面是单级地址例如 /me
• 猜测是有 udm_token 在 set 时被设置在了 my/ 下，而退出登录删除时并没有删除这个地址下的内容
• 查看 cookie-universal 源码，发现 set 方法默认带 options = {path: '/'}

    set(name = '', value = '', opts = { path: '/' }) {
      if (isNeither) return
      value = typeof value === 'object' ? JSON.stringify(value) : value

      if (isServer) {
        const cookies = getResponseCookies()
        cookies.push(Cookie.serialize(name, value, opts))
        setResponseCookie(cookies)
      } else {
        document.cookie = Cookie.serialize(name, value, opts)
      }
    }

• 在我的代码中，存在传入 options 的情况，options 中加入了 maxAge，却没有加入 path, 因此被错误地设置到了 /my 下

// 错误
this.$cookies.set('udm_token', token, {
    maxAge: 60 * 60 * 24 * 7
})

解决：
在手动传入 options 时一并添加 path: '/' 得以解决

this.$cookies.set('udm_token', token, {
    maxAge: 60 * 60 * 24 * 7,
    path: '/'
})

总结：

解决下来回头看觉得问题挺蠢的，感叹规范化代码和好好看文档的重要性。
不过掉坑挣扎爬出来的过程，也是分析解决问题过程，还熟悉了源码和原理，收获也不少，哈哈。