记录一下最近nuxt项目时碰到的坑。有时候会出现登录不成功的问题。大致流程是,先请求login接口获取token存入cookie之后发送(member/index)请求获取用户信息接口。token已从login接口中获取到,且存入cookie之后再发送请求获取用户信息接口。发现出现登录未成功的情况时,member/index接口的请求头并未携带cookie。axios中已配置允许携带cookie。问题出现在存入cookie时的path路径问题。
$axios.defaults.timeout = 10000 $axios.defaults.withCredentials = true
$axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8'
$axios.defaults.headers.get['Content-Type'] = 'application/json;charset=UTF-8'
$axios.onRequest((config) => { // console.log('config', config) if
(config.params) { config.params.format = 'json' config.params.abc_game_agent_id
= store.state.customer.channel_id config.params.xwweb = 'new' } if
(config.data) { config.data.format = 'json' config.data.abc_game_agent_id =
store.state.customer.channel_id config.data.xwweb = 'new' } })
$axios.onResponse((response) => { // console.log('response', response.status)
}) // 请求失败拦截重定向到主页(404页面) $axios.onError((error) => { const code =
parseInt(error.response && error.response.status) if (code != 200) {
redirect('/error') } })
截图部分如下:324行打印出存入cookie中的值,105为发送用户请求接口时的打印操作。
解决方案很简单:路径设置为'/'就可以了
document.cookie = `XWID=${res.data.token};path=/;`
之前直接document.cookie存的,同时也打开了控制台,Nuxt的多页面。会自动把控制台左上角的域名后的地址一起带上显示在path里面。但是我在首页打开的控制台,点击进入内页时,控制台左上角的域名并没有变,所以怎么不管点path都是'/',才一直很难复现这个BUG。只有进入内页后刷新,控制台的地址栏才会变化。就能稳定复现BUG。存入路径不对,导致请求时没有把cookie携带上。好像还有另外一种情况是domian跨域的问题导致无法setcookie。目前没遇到,不清楚。主要还是对cookie不怎么了解。