如何添加基于nextjs cookie的安全身份验证？

wsxa1bj1 于 2021-09-23 发布在 Java

关注(0)|答案(1)|浏览(281)

我有个小问题。我对nextjs非常陌生，我正在尝试通过制作应用程序来学习。我已经成功地使用next建立了一个登录系统，在保护路由时几乎没有问题。成功登录后，我已成功添加cookie。现在，每当用户转到受保护的路由时，我都要验证cookie。使用本教程，我遵循了以下步骤。
制作一个高阶组件并使用它检查cookie验证。
使用它 Package 受保护的组件。
下面是我的本领。

import { useRouter } from "next/router";
import Cookies from 'js-cookie';

const withAuth = (WrappedComponent) => {
  return (props) => {
    if (typeof window !== "undefined") {
      const Router = useRouter();

      const accessToken = Cookies.get('token');
      if (!accessToken) {
        Router.replace("/");
        return null;
      }
      return <WrappedComponent {...props} />;
    }
    return null;
  };
};

export default withAuth;

然后我用上面的hod Package 了我的组件。

import React, { Component } from 'react';
import withAuth from '../utils/withAuth';
class Home extends Component {
  render() {
    return (
      <div>
        HOME
      </div>
    );
  }
}

export default withAuth(Home);

上面的问题#1 hod显示控制台警告，如下所示。
警告：服务器html中应包含匹配的。div
他们认为我可以解决这个问题吗？根据github的一些回答，我发现可以使用useeffect解决这个问题。有人能帮我吗？
问题#2这样，我必须用我的hod Package 每个受保护的组件。这是做这件事的正确方法还是有其他方法比这做得更好？
非常感谢您或您的支持。

JavaScript reactjs Authentication cookies next.js

来源：https://stackoverflow.com/questions/68325919/how-to-add-nextjs-cookie-based-secure-authentication

1条答案

按热度按时间

i7uaboj41#

花了一段时间之后。我能够通过使用下面的代码解决这个问题。现在我只想知道上面提到的第二个问题的答案。
问题#2这样，我必须用我的hod Package 每个受保护的组件。这是做这件事的正确方法还是有其他方法比这做得更好？
非常感谢您或您的支持。
我用来解决这个问题的代码

import Router from 'next/router'
import Cookies from 'js-cookie';
import React, { useState, useEffect } from 'react';

const withAuth = (WrappedComponent) => {
  return (props) => {
    const [isLoggedIn, setLoginStatus] = useState(false);
    useEffect(() => {
      if (typeof window !== "undefined") {
        const accessToken = Cookies.get('token');
        if (accessToken) {
          setLoginStatus(true)
        }
        else {
          Router.push("/")
        }
      }
    }, []);
    if (isLoggedIn) {
      return <WrappedComponent {...props} />;
    } else {
      return null;
    }
  }
};

export default withAuth;

赞(0）回复(0）举报 2021-09-23

我来回答

如何添加基于nextjs cookie的安全身份验证？

1条答案

相关问题

热门标签

最新问答