Javascript 如何在NextJS中正确读取需要身份验证的请求的Axios授权令牌？

我有一个组件，它需要一个令牌才能从数据库中获取数据。用户通常在成功登录后获得令牌：

constloginauth=（loginda，history）=>async（）=>{
const res=await api.post（`/auth/login`，loginda）；
如果（res.statusText==`OK`）{
if（res.data.data）{
history.push（`/auth/validatewofcorauth/${res.data.data.\u id}`）；
返回res.data；
}
setAuthToken（res.data.token）；
history.push（'/posts'）；
}否则{
console.log（'error'）；
//设置错误（res.data.error）；
}
};

正如你们所看到的，我正在调用一个名为

sethAuthToken

的方法，所述函数如下所示：

export const setAuthToken = (token) => {
  if (token) {
    if (typeof window !== 'undefined') {
      api.defaults.headers.common['Authorization'] = `Bearer ${token}`;
      api.defaults.headers['Authorization'] = `Bearer ${token}`;
      localStorage.setItem('xAuthToken', token);
    }
  } else {
    delete api.defaults.headers.common['Authorization'];
    delete api.defaults.headers['Authorization'];
    localStorage.removeItem('xAuthToken');
    deleteCookie('xAuthToken', '/');
  }
};

接收到令牌后，上面的函数将其传递给

api.default.headers.common

；这是我的api：

从“axios”导入axios；
从“../config”导入{API_URL}；
const api=axios.create({
baseURL:`${API\U URL}/API/v1`，
标题：{
“内容类型”：“应用程序/json”`
}
});
console.log（'API'，API.defaults）；
//到目前为止，一切都很好，因为我可以看到代币
//在上一个控制台日志（）中检索到
api.interceptors.response.use(
（res）=>res，
（错误）=>{
退回承诺。拒绝（错误）；
}
);
导出默认api；

到目前为止，一切都很顺利

现在，问题出现在下面的请求和组件上。这个组件从一个请求中获取数据，该请求确实需要一个承载令牌（现在应该是可用的）

从'react'导入{useffect，useState，useContext}；
从“下一个/路由器”导入{withRouter}；
//行动
从“@/actions/post”导入{getTimelineFromServer}；
//助手
从“@/layout/NothingFoundAlert”导入NothingFoundAlert；
从“@/routing/privateRoutes”导入privateRoutes；
从“@/routing/AuthContext”导入AuthContext；
//重新装配
从“react引导/CardColumns”导入CardColumns；
//嵌套组件
从“./Single”导入单个；
导出常量getServerSideProps=async（上下文）=>{
const params=`？page=${context.query.page}&limit=${context.query.limit}&sort=${context.query.sort}&status=published`；
常量数据=（等待getTimelineFromServer（参数）（）| |[]；//获取视频
如果（！数据）{
返回{notFound:true}；
}
返回{
道具：{
params:params，
serverPosts:data.data，
}
};
};
常数时间线=({
params，
serverPosts，
路由器
}) => {
const[posts，setPosts]=useState（[]）；
useffect（（）=>{
设置柱（服务器柱）；
}，[params]）；
const{auth}=useContext（AuthContext）；
返回柱？长度>0(
{posts.map（（post，index）=>(
))}
) : (
)
};
使用路由器导出默认值（privateRoutes（时间线））；

需要它的函数是

getTimelineFromserver（params）（| |[]

；这就是它看起来的样子：

export const getTimelineFromServer=（params）=>async（dispatch）=>{
log（api.defaults.headers.common）；
试一试{
const res=await api.get（`/posts/timeline${params}`）；
log（'Get timeline'，api.defaults.headers.common）；
返回res.data；
}捕捉（错误）{
返回{msg:err？.response？.statusText，status:err？.response？.status}；
}
};

现在，我假设错误出现在

api.defaults.headers.common

中，因为当我console.log-it时，它只返回

{Accept:'application/json，text/plain，*/*/'}

总之：令牌由于某种原因被删除？

谢谢你，我知道这篇文章很长，但如果我以前没有尝试过任何东西，我不会问你；现在，我没有主意了

---

注意：我有一个privateRoutes HOC，用于上面的组件，但我认为这与抓取无关，因为它唯一做的事情是验证是否找到了X令牌，否则，将用户重定向到

/aut/login

您的

setAuthToken

逻辑发生在客户端，但是

getTimelineFromServer

发生在服务器上的

getServerSideProps

内部。您的

axios

实例未在客户端和服务器之间共享。