Question

当用户未通过身份验证时，我一直在尝试几种保护路由的方法，但到目前为止，我一直在为此苦苦挣扎。

尝试从getServerSideProps进行身份验证时，最经常出现的问题是我经常遇到Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client，所以我一直试图不从那里重定向并设置一个redirect布尔值，这样我就可以从客户端重定向。问题是，即使我（我认为）在客户端中，现在我仍然得到一个指出No router instance found. you should only use "next/router" inside the client side of your app.的错误。

export async function getServerSideProps(ctx: ApiRoutesTypes) {

  const cookie = parseCookies(ctx);

   if (!testCookie.autho) {
     const redirectLogin = true;

     return { props: { redirectLogin } };
   }

  const query = {
    text: 'SELECT fk_users_id FROM tokens WHERE token = $1 AND status = true',
    values: [cookie],
  };
  const userId = (await db.query(query)).rows[0].fk_users_id;
    ...

  return { props: { userId } };
}

export default function Homepage({redirectLogin }){
  const router = useRouter();

  
  if (redirectLogin) {
    router.push('/login');
  }

    ...

}

有可能解决这个问题吗？如果没有，那么如果我的所有页面都大量使用getServerSideProps但又需要进行身份验证，那么重定向的最佳方法是什么？

Answer 1

使用受保护路由并将用户重定向到登录页面的最佳方法-

使用功能设置页面的初始属性- 现在，如果在调用函数时通过了Page是否受保护。

export const authInitialProps = isProtectedRoute => ({
  req,
  res,
  query: { userId }
}) => {
  const auth = req ? getSessionFromServer(req) : getSessionFromClient();
  const currentPath = req ? req.url : window.location.pathname;
  const user = auth.user;
  const isAnonymous = !user;
  if ( isProtectedRoute && isAnonymous && currentPath !== "/signin") {
    return redirectUser(res, "/signin");
  }
  return { auth, userId };
};

此处isProtectedRoute将告诉您路由是否受保护。如果是这样，那么用户也没有登录。如果没有-那么。

将用户重定向到新页面（即登录）。

如果已登录-那么

将身份验证数据传递到页面。

现在要检查是否已登录用户吗？

服务器端检查-

export const getSessionFromServer = req => {
  if (req.user) {
    return { user: req.user };
  }
  return {};
};

客户端检查-

Use cookies or local storage, whatever is being used by you.
To check for the login.

使用getServerSideProps保护路由

1 个答案: