axios - 如何在 nextjs 中处理服务器端身份验证？

Question

我在 localstorage 中设置 Token 并使用（axios）将其发送到每个请求，但问题是当我使用 getServerSideProps 时，不会发送令牌，因为在服务器端无法访问 localStorage。

我想我应该使用 Cookies，我尝试了js-cookies，但它在服务器上也不起作用。

是否有任何解决方案可以在服务器端以getServerSideProps和getStaticProps的形式发送令牌？

Answer 1

Localstorage 仅在客户端；利用getInitialProps

function Page({ stars }) {
    return <div>Next stars: {stars}</div>
}
        
Page.getInitialProps = async ({ req }) => {
    let token;
    
    // server
    if (req) return { page: {} };
    else {
        // client
        const token = localStorage.getItem("auth");
        const res = await fetch('https://api.github.com/repos/vercel/next.js', { headers: { Authorization: token }});
        const data = await res.json();
        return { page: data };
    }
};

export default Page

只需修改我的代码，通常它可以工作