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

camsedfj  于 2022-11-05  发布在  iOS
关注(0)|答案(1)|浏览(145)

我有一个函数称为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没有重定向到主页。
你知道我做错了什么吗

ztigrdn8

ztigrdn81#

路由器是一个客户端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

相关问题