我正在使用 zeit next 来制作一个带有 React 的同构应用程序,并使用带有 express-session(在其他服务器中)的 express 来制作 API。
此组件应从 API (request.get(' http://0.0.0.0:3100/private ')) 请求私有(private)数据,并在用户登录时显示私有(private)页面,否则重定向到登录页面。
在客户端这有效,但是当我刷新私有(private)页面时,我被重定向到登录,因为客户端和服务器端的 session 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;
最佳答案
@PacoRampus as @neerajdngl said 刷新页面时,您的 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.js 文件应该有这样的代码:
server.get('/yourPrivatePage', (req, res) => {
return app.render(req, res, '/yourPrivatePage', req.query)
});
希望这对你有用。
关于javascript - 刷新页面时 session 丢失(Next、react、同构),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45894278/