代码之家  ›  专栏  ›  技术社区  ›  PacoRampas

刷新页面时会话丢失(下一步,反应,同构)

  •  1
  • PacoRampas  · 技术社区  · 7 年前

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

    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;
    
    2 回复  |  直到 7 年前
        1
  •  3
  •   Bijay Rai    7 年前

    @正如@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)
            });
    

    希望这对你有用。

        2
  •  1
  •   neerajdngl    7 年前

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

    您需要执行以下代码段中的操作。我正在使用 取来 要求

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