导航到下一页中API响应的其他页面

Question

我有一个名为postAPI的函数，它是在我的下一个应用程序中向后端服务器发送任何请求的常用函数。

import Router from 'next/router';
export const postAPI = async (
endpoint,
data = {},
headers = {},
method = 'POST',
options = {}
) => {
const axios = require('axios');
const { parseCookies } = require('nookies');
const cookies = parseCookies();
const token = cookies[process.env.SESSION_TOKEN_NAME] || false;
const config = {
url: endpoint,
method,
data: data,
headers: {
authorization: headers.authorization
? headers.authorization
: `Bearer ${token}`,
},
...options,
};
const res = await axios(config).catch((err) => {
if (err.response.status === 401) {
Data.logoutUser();
setCookie(null, process.env.SESSION_TOKEN_NAME, null, {
maxAge: 1,
path: '/',
});
deleteAllCookies();
Router.push('/');
window.localStorage.clear();
}
});
return res?.data || res?.err;
};

这个postAPI函数可以根据需要从任何下一个组件调用。

每当API返回401状态代码时，我试图将用户重定向到登录页面。

我正在使用next/router，但它没有重定向到主页。它将清除cookie和本地存储，但Router.push不会重定向到主页。

你知道我在这里做错了什么吗？

Answer 1

路由器是一个客户端api，而不是服务器端，这意味着服务器端的任何路由器基本上都不做任何事情。您必须返回错误。

当您在客户端调用此函数并返回错误时可以重定向用户。

客户端

useEFfect(() => {
async function post() {
try {
await postApi();
} catch (e) {
console.log(e);
if (e.response.status === 401) router.push("/home");
}
}
post();
},[])

服务器端

export async function getServerSideProps(context) {
try {
await postApi();
} catch (e) {
console.log(e);
if (e.response.status === 401) {
return {
redirect: {
permanent: false,
destination: "/",
},
};
}
}
}

https://nextjs.org/docs/api-reference/next/router