通过检查保存在用户 cookie 中的 JWT 来保护路由

Question

我刚刚在 this blog post 之后的 NextJS + DjangoRest 项目中实现了 Google 社交身份验证。我正在尝试弄清楚如何制作受保护的路由，以便在用户未登录时重定向用户。

到目前为止我是这样做的：

当用户登录时，它将 jwt_token 在 cookie 中保存为 httponly
使用带有“withCredentials: true”的 axios 来访问 API 端点，returns 当前用户数据（即电子邮件）
将用户数据保存为 useContext()。加载受保护页面时，检查UserContext是否为空，如果为空则重定向到登录页面。

明显的问题是每当用户刷新页面时 UserContext 都会重置，即使 JWT 令牌仍然存在于 cookie 中也是如此。我觉得这不是实现它的正确方法。

那么我将如何以一种非 hacky 的方式实现类似的功能？我无法从前端的 cookie 中读取 jwt-token，因为它是 httponly。是否有安全的方法从 cookie 中读取用户的 JWT 令牌以测试身份验证？

Answer 1

因此，如果我没看错你的问题，那么你可以在你的页面上使用 getServerSide 属性来检测用户是否通过你的 api.

认证

function Page({ isAuth }) {
    return (
    <>
      <div>My secure page</div>
      //if you return data from your token check api then you could do something like this
      <div>Welcome back {isAuth.name}</div>
    </>
    )
}

export default Page



export async function getServerSideProps(context) {
    const isAuth = await tokenChecker(context.cookies.jwt) // In your token checker function you can just return data or false.
    if (!isAuth) { //if tokenChecker returns false then redirect the user to where you want them to go
        return {
            redirect: {
                destination: `/login`,
            }
        };
    }
//else return the page
    return {
        props: {
            isAuth,
        },
    }
}

如果这不是你的意思，请告诉我，我可以修改我的答案。

Answer 2

我稍微修改了@Matt 的回答，typescript-friendly 解决了我的问题。它只是检查用户的 cookie 中是否有 jwt_token 值。

import cookies from 'cookies'

export const getServerSideProps = async ({
  req,
}: {
  req: { headers: { cookie: any } };
}) => {
  function parseCookies(req: { headers: { cookie: any } }) {
    var parsedCookie = cookie.parse(
      req ? req.headers.cookie || '' : document.cookie
    );
    return parsedCookie.jwt_token;
  }

  const isAuth = parseCookies(req);

  if (typeof isAuth === undefined) {
    return {
      redirect: {
        destination: `/auth/sign_in`,
      },
    };
  }
  return {
    props: {
      isAuth,
    },
  };
};

通过检查保存在用户 cookie 中的 JWT 来保护路由

Protected Route by checking JWT saved in user's cookie

reactjs

cookies

django-rest-framework

jwt