sessionStorage在导航后不可用

Question

我正试图实现一个React解决方案与Strapi作为后端，其中授权是使用JWT-keys完成。我的登录表单是使用下面的函数实现的:

const handleLogin = async (e) => {
let responsekey = null
e.preventDefault();
const data = {
identifier: LoginState.username,
password: LoginState.password
}
await http.post(`auth/local`, data).then((response) => {
setAuth({
userid: response.data.user.id,
loggedin: true
})
responsekey = response.data.jwt
setLoginState({...LoginState, success: true});
sessionStorage.setItem('product-authkey', responsekey);
navigate('/profile');
}).catch(function(error) {
let result = ErrorHandlerAPI(error);
setLoginState({...LoginState, errormessage: result, erroroccurred: true});
});
}

API处理程序应该返回一个Axios项，该项可用于查询API。该函数也显示在下面。如果没有现在应该返回一个api密匙Axios对象没有一个网站的一些功能没有JWT-key是必要的。

const GetAPI = () => {
let result = null
console.log(sessionStorage.getItem("product-authkey"))

if (sessionStorage.getItem("product-authkey") === null) {
result = axios.create(
{
baseURL: localurl,
headers: {
'Content-type': 'application/json'
}
}
)
} else {
result = axios.create({
baseURL: localurl,
headers: {
'Content-type': 'application/json',
'Authorization': `Bearer ${sessionStorage.getItem("product-authkey")}`
}
})
}
return result
}
export default GetAPI()

然而，一旦用户被重定向到配置文件页面(在该页面上进行需要jwt密钥的api调用)，请求就会失败，因为sessionStorage中没有存在密钥。console.log也显示'null'。如果我看一下DevTools，我确实看到了关键在那里……如果我刷新配置文件页面，请求将通过密钥，因此密钥和后端将正常工作。

我尝试使GetAPI函数是同步的，并将导航命令移出handleLogin函数的等待部分，但这没有帮助。

有人有主意吗?

谢谢!

真诚,Jelle

更新:

似乎现在工作，但我需要在useEffect钩子中引入getAPI，我不确定这是否是一个好模式。这是配置文件页面的代码:

useEffect(() => {
let testapi = GetAPI()
const getMatches = async () => {
const response = await testapi.get(`/profile/${auth.userid}`)
const rawdata = response.data.data
... etc
}, [setMatchState]

Answer 1

export default GetAPI()这是有问题的一行。当模块加载时，您正在运行GetApi函数。基本上，只有当您访问站点并加载js文件时才能获得令牌。然后继续处理null。重新加载页面时可以加载从会话令牌存储。

解决方案是导出函数和调用它时,你需要做一个api调用。