使用 remix-auth-auth0 登录后如何重定向到原始页面
How to redirect to original page after login with remix-auth-auth0
相关:How to redirect back to original page after login / signup in remix-auth?
如果一个用户试图访问一个受保护的路由,我希望他登录,然后被重定向到这个路由。
使用 remix-auth,我在受保护的路由中有这个:
export let loader: LoaderFunction = async ({ request }) => {
return await authenticator.isAuthenticated(request, {
failureRedirect: "/login?redirectTo=/search",
});
};
然后在我的登录路径中:
export let loader: LoaderFunction = async ({ request }) => {
return await login(request);
};
函数 login() 为:
export async function login(request: Request) {
let url = new URL(request.url);
let returnTo = url.searchParams.get("redirectTo") as string | null;
try {
// call authenticate as usual, in successRedirect use returnTo or a fallback
return await authenticator.authenticate("auth0", request, {
successRedirect: returnTo ?? "/search",
failureRedirect: "/",
});
} catch (error) {
if (error instanceof Response && error.redirected) {
const returnToCookie = createCookie("returnToCookie");
error.headers.append(
"Set-Cookie",
await returnToCookie.serialize(returnTo)
);
}
throw error;
}
}
最后回调路由是:
export let loader: LoaderFunction = async ({ request }) => {
//get the returnTo from the cookie
const returnToCookie = createCookie("returnToCookie");
const result = await returnToCookie.parse(request.headers.get("Cookie"));
let returnTo = (result) ?? "/";
return await authenticator.authenticate("auth0", request, {
successRedirect: returnTo,
failureRedirect: "/",
});
};
问题是 login() 函数当前将用户重定向到回调 url(使用 url 中的代码),但 cookie 中没有任何特殊之处,因此回调路由使用回退.
如果我在登录路由中尝试&捕获 login() 函数,获得的错误是一个响应,而不是重定向,所以 cookie 中也没有什么特别的(而且我真的不知道如何处理这个响应错误)
我不确定我在原文中遗漏了什么 post。
经过一些尝试,我找到了解决方案:
login() 函数 return 一个 302 HTTP 代码,这是一个重定向,但不触发 if (error instanceof Response && error.redirected)
只需删除 && error.redirected
条件即可使重定向正常工作。
相关:How to redirect back to original page after login / signup in remix-auth?
如果一个用户试图访问一个受保护的路由,我希望他登录,然后被重定向到这个路由。
使用 remix-auth,我在受保护的路由中有这个:
export let loader: LoaderFunction = async ({ request }) => {
return await authenticator.isAuthenticated(request, {
failureRedirect: "/login?redirectTo=/search",
});
};
然后在我的登录路径中:
export let loader: LoaderFunction = async ({ request }) => {
return await login(request);
};
函数 login() 为:
export async function login(request: Request) {
let url = new URL(request.url);
let returnTo = url.searchParams.get("redirectTo") as string | null;
try {
// call authenticate as usual, in successRedirect use returnTo or a fallback
return await authenticator.authenticate("auth0", request, {
successRedirect: returnTo ?? "/search",
failureRedirect: "/",
});
} catch (error) {
if (error instanceof Response && error.redirected) {
const returnToCookie = createCookie("returnToCookie");
error.headers.append(
"Set-Cookie",
await returnToCookie.serialize(returnTo)
);
}
throw error;
}
}
最后回调路由是:
export let loader: LoaderFunction = async ({ request }) => {
//get the returnTo from the cookie
const returnToCookie = createCookie("returnToCookie");
const result = await returnToCookie.parse(request.headers.get("Cookie"));
let returnTo = (result) ?? "/";
return await authenticator.authenticate("auth0", request, {
successRedirect: returnTo,
failureRedirect: "/",
});
};
问题是 login() 函数当前将用户重定向到回调 url(使用 url 中的代码),但 cookie 中没有任何特殊之处,因此回调路由使用回退.
如果我在登录路由中尝试&捕获 login() 函数,获得的错误是一个响应,而不是重定向,所以 cookie 中也没有什么特别的(而且我真的不知道如何处理这个响应错误)
我不确定我在原文中遗漏了什么 post。
经过一些尝试,我找到了解决方案:
login() 函数 return 一个 302 HTTP 代码,这是一个重定向,但不触发 if (error instanceof Response && error.redirected)
只需删除 && error.redirected
条件即可使重定向正常工作。