如何允许用户使用auth0登录

Question

我使用Auth0进行身份验证，使用Redux进行状态管理，我希望用户只有在登录时才能添加喜爱的硬币，否则就应该重定向用户登录。

这是我的密码

import { useDispatch } from "react-redux";
import { addToBasket } from "../slices/basketSlice";
import { useUser } from '@auth0/nextjs-auth0';

function FullCryptoListComponent (){

    const { user } = useUser();

    const dispatch = useDispatch();

    const addItemToBasket = () => {
        dispatch(
          addToBasket({
            id,
            name,
            price,
            marketCapDaily,
            marketCap,
            rank,
            image,
            percent,
            coinSymbol
          })
        );
        
      };

  return (
<div>
 <StarBorderIcon onClick={user? ({addItemToBasket}): (<a href="/api/auth/login" />)} className="absolute top-3 right-0 lg:relative lg:top-0 lg:right-0 cursor-pointer" />
</div>
)
}
export default FullCryptoListComponent;

Answer 1

您需要查找用户是否已登录并通过身份验证(isAuthenticated)字段；

import { useAuth0 } from "@auth0/auth0-react";

  const { user, isAuthenticated, isLoading } = useAuth0();

然后，只有当isAuthenticated为真时，才允许用户“添加喜爱的硬币”。