最近处理 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: '/'
})
总结：
解决下来回头看觉得问题挺蠢的，感叹规范化代码和好好看文档的重要性。
不过掉坑挣扎爬出来的过程，也是分析解决问题过程，还熟悉了源码和原理，收获也不少，哈哈。
网友评论