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

我正在使用zeit来创建一个具有反应的同构应用程序，并使用快速会话（在其他服务器）创建一个API来创建API。刷新页面时会话丢失（下一步，反应，同构）

该组件应该从API（request.get（'http://0.0.0.0:3100/private'））请求隐私数据，并在用户登录时显示私人页面，如果没有，则显示私人页面。

在客户端这可以工作，但是当我刷新私人页面时，我被重定向到登录，因为客户端和服务器端的会话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;

来源

2017-08-26 PacoRampas

你的代码段不工作， –

@PacoRampus。所以，你被重定向到登录页面。

你可以做这样的事情：

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.js文件应该已经像这样的代码：

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

希望这对你的作品。

来源

2017-08-28 09:17:33

谢谢，它工作得很好。我正在设置完整的标题以获取： const response = await fetch（'http：// someDomain/private'，credentials：'include'， headers：req.headers }））; 因此，客户端和服务器具有相同的API标头。 – PacoRampas

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

当您向客户端发送api请求时，cookie将自动与请求一起传递，这将验证您的api调用。

你需要做一些类似于下面的代码片段。我使用的是@neerajdngl说，虽然刷新页面，你的cookie被传递到没有浏览器的Express服务器获取的而不是要求

getCookies = encodeURIComponent(req.cookies.token); 
const sendCookie = 'token=' + getCookies; 
const response = await fetch(YOUR_API_ENDPOINT, { 
      credentials: 'include', 
      headers: {Cookie: sendCookie} 
     })

来源

2017-08-28 09:01:09 neerajdngl

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

回答

相关问题