Question

我有一个下载按钮，用户可以从中下载资产。但我希望只有经过身份验证的用户才能下载。如果用户未通过身份验证，然后单击下载按钮，那么我想向他们显示带有登录按钮的模式。我有一个模态部分。我正在使用反应。请帮助我。

从firebase获取当前经过身份验证的用户。

Platform.isAndroid

这是我的下载按钮代码。

const {currentUser} = useAuth();

模式代码：

  <a className="bg-secondary text-white font-bold py-3 
     px-5 rounded text-2xl focus:outline-none mt-3 block w-48" href="YOUR_URL">
  <i className="animate-bounce fas fa-arrow-down mr-2"></i>
    Download
</a>

Answer 1

您可以使用button而不是a并使用onClick来检查单击按钮时currentUser是否存在。

这是最终代码：

function x {

const {currentUser} = useAuth();

const downloadAssets = () => {
   if(currentUser){
      window.open("url assets here", '_blank', 'noopener,noreferrer')
   }else{
     // Open modal here
     alert("User not authenticated"); 
   }
}
return {
<>
  ...
  <button onClick={downloadAssets}><i className="animate-bounce fas fa-arrow-down mr-2"></I>Download</button>
  ...
</>
}

有条件地渲染下载按钮

1 个答案: