Javascript 刷新页面时会话丢失（下一步、反应、同构）

我正在使用zeit next制作一个带有react的同构应用程序，以及一个带有express session的express（在其他服务器中）来制作API

此组件应该从API（request.get（“”））请求私有数据，如果用户已登录，则显示私有页面；如果用户未登录，则重定向到登录

在客户端，这是可行的，但是当我刷新私有页面时，我被重定向到登录，因为客户端和服务器端的会话cookie是不同的。我怎样才能解决这个问题

const Private = (props) => {
    return (
        <main>
            <h1>Private </h1>
            <Link href="/">
                <a>Home</a>
            </Link>
        </main>
    );
}

Private.getInitialProps = async ({ res }) => {
    // getInitialProps is ejecuted in server side when you refresh the page (first time) 
    // but if you navigate in client side it is ejecuted in client. Server side and client
    // have a different session for API calls. Is posible to share the session by client
    // and server side? 
    const response = await request.get('http://someDomain/private');

    let body;
    if (response.status !== 401) {
        body = await response.json();
    } else {
        if (res) {
            res.writeHead(302, { Location: '/login' })
            res.end()
        } else {
            Router.push('/login')
        }
    }

    return {}
}

export default Private;

const Private=（道具）=>{
返回(
私有的
家
);
}
Private.getInitialProps=异步（{res}）=>{
//当您刷新页面时（第一次），会在服务器端执行getInitialProps
//但若你们在客户端导航，它是在客户端、服务器端和客户端执行的
//为API调用使用不同的会话。可以通过客户端共享会话
//服务器端呢？
const response=等待请求。获取（'http://someDomain/private');
让身体；
如果（response.status！==401）{
body=wait response.json（）；
}否则{
如果（res）{
res.writeHead（302，{Location:'/login'}）
决议结束（）
}否则{
Router.push（“/login”）
}
}
返回{}
}
导出默认私有；

刷新页面时，cookie将传递给express server，而不是api。您需要在express中获取cookie，然后将cookie与api请求一起传递

当您从客户端发出api请求时，cookie将自动随请求一起传递，这将验证您的api调用

您需要执行以下代码段中的操作。我正在使用fetch而不是request

---

@正如@neerajdngl在刷新页面时所说的那样，PacoRampus会将cookie传递到不在浏览器中的express服务器。所以，您被重定向到登录页面

您可以这样做：

    Private.getInitialProps = async ({ req, res }) => {
        let Cookie;
        if (req) {
            Cookie = encodeURIComponent(req.cookies.your_token_name);
        } else {
            Cookie = '';
        }

        let yourCookie= 'token=' + Cookie;

       const response = await fetch('http://someDomain/private', {
            credentials: 'include',
            headers: {Cookie: yourCookie}
        }));

        let body;
        if (response.status !== 401) {
            body = await response.json();
        } else {
            if (res) {
                res.writeHead(302, { Location: '/login' })
                res.end()
            } else {
                Router.push('/login')
            }
        }

        return {}
    }

server.get('/yourPrivatePage', (req, res) => {
            return app.render(req, res, '/yourPrivatePage', req.query)
        });

您的server.js文件应该包含如下代码：

    Private.getInitialProps = async ({ req, res }) => {
        let Cookie;
        if (req) {
            Cookie = encodeURIComponent(req.cookies.your_token_name);
        } else {
            Cookie = '';
        }

        let yourCookie= 'token=' + Cookie;

       const response = await fetch('http://someDomain/private', {
            credentials: 'include',
            headers: {Cookie: yourCookie}
        }));

        let body;
        if (response.status !== 401) {
            body = await response.json();
        } else {
            if (res) {
                res.writeHead(302, { Location: '/login' })
                res.end()
            } else {
                Router.push('/login')
            }
        }

        return {}
    }

server.get('/yourPrivatePage', (req, res) => {
            return app.render(req, res, '/yourPrivatePage', req.query)
        });

---

希望这对你有用

您的代码片段不起作用，谢谢，它工作得很好。我正在将完整头设置为fetch:const response=await fetch（“”，{credentials:'include'，headers:req.headers}）；因此，客户端和服务器具有相同的API头。