英文:
Remix session values don't persist across pages
问题
我正在使用Remix创建一个网站，我想要在不同页面之间持久化会话值。我认为问题出在getSession请求上，因为这些值在对同一页面的多次请求之间不会持久化。我在sessions.ts中实现了一个会话Cookie：
const { getSession, commitSession, destroySession } =
createCookieSessionStorage<SessionData, SessionFlashData>(
{
// 创建Cookie的选项
cookie: {
name: "__session",
maxAge: 1200,
path: "/",
sameSite: "none",
secure: true,
secrets: ["surprise"]
},
}
);
在一个页面上，我设置了一个值并将其记录下来，并获得了预期的值：
export const loader = async ({ request }: LoaderArgs) => {
const session = await getSession(
request.headers.get("Cookie")
);
session.set("token", "abc123")
var data = { "count": 2 }
console.log(session.get("token"))
return json(data, {
headers: {
"Set-Cookie": await commitSession(session),
},
});
};
然而，当我尝试在另一个页面访问该值时，该值为undefined：
export const loader = async ({ request }: LoaderArgs) => {
const session = await getSession(
request.headers.get("Cookie")
);
var data = { "abc": 442 }
console.log(session.get("token"))
return json(data, {
headers: {
"Set-Cookie": await commitSession(session),
},
});
return null
};
我对Remix和React非常新，请帮助我解决问题，谢谢！
英文:
I'm making a site using Remix where I'd like to persist session values across pages. I think the issue lies in the getSession request, as the values do not persist across requests to the same page. I have implemented a session cookie in sessions.ts:
const { getSession, commitSession, destroySession } =
createCookieSessionStorage<SessionData, SessionFlashData>(
{
//cookie options to create a cookie
cookie: {
name: "__session",
maxAge: 1200,
path: "/",
sameSite: "none",
secure: true,
secrets: ["surprise"]
},
}
);
On one page I set a value and log it out and receive the expected value
export const loader = async ({ request }: LoaderArgs) => {
const session = await getSession(
request.headers.get("Cookie")
);
session.set("token", "abc123")
var data = { "count": 2 }
console.log(session.get("token"))
return json(data, {
headers: {
"Set-Cookie": await commitSession(session),
},
});
};
however when i try to access the value in a different page, the value is undefined
export const loader = async ({ request }: LoaderArgs) => {
const session = await getSession(
request.headers.get("Cookie")
);
var data = { "abc": 442 }
console.log(session.get("token"))
return json(data, {
headers: {
"Set-Cookie": await commitSession(session),
},
});
return null
};
I'm very new to remix and react so appreciate any help!
答案1
得分: 0
eht eussi saw ot od htiw eht emitSemas noitpo dna ecurS snoitpo.
sa I ma gnikrow ylcol, ecruS tsum eb tes ot eslaf hcihw snaem emitSemas tsu tsum eb rehtie xal ro tsirts
英文:
the issue was to do with the sameSite option and Secure options.
as I am working locally, Secure must be set to false which means sameSite must be either lax or strict
答案2
得分: 0
@Ov_.01的回答是正确的。我不得不将我的secure从process.env.NODE_ENV === 'production'更改为明确的false。这是我完整的Cookie，允许会话在本地持续存在。
const sessionStorage = createCookieSessionStorage({
cookie: {
// secure: process.env.NODE_ENV === 'production',
secure: false, // TODO: 在使用process.env.NODE_ENV === 'production'时本地会话不会持续存在
secrets: [process.env.SESSION_SECRET],
sameSite: 'lax',
maxAge: 30 * 24 * 60 * 60, // 30天
httpOnly: true
}
})
英文:
Answer from @Ov_.01 is correct. I had to change my secure from process.env.NODE_ENV === 'production' to an explicit false. This was my full cookie that allowed sessions to persist for me locally.
const sessionStorage = createCookieSessionStorage({
cookie: {
// secure: process.env.NODE_ENV === 'production',
secure: false, // TODO: local session doesn't persist when using process.env.NODE_ENV === 'production'
secrets: [process.env.SESSION_SECRET],
sameSite: 'lax',
maxAge: 30 * 24 * 60 * 60, // 30 days
httpOnly: true
}
})
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论