我使用firebase以角度创建应用程序，如何让每个用户拥有自己的任务表[关闭]

Posted 2023-02-23

【中文标题】我使用firebase以角度创建应用程序，如何让每个用户拥有自己的任务表[关闭]

【英文标题】：I created application in angular using firebase, how to make possible for each user to have their own table with tasks [closed]

【发布时间】：2021-02-02 00:00:39

【问题描述】：

我需要改进什么，以及我需要在我的代码中添加什么，以便每个登录用户都有自己的任务表，并且可以更新和删除自己的任务。 我的第二个问题是如何隐藏菜单项 tasks、add-tasks、如果用户未登录，则注销，如果用户已登录，如何显示它们。 这是我在 GitHub https://github.com/AleksandarRadinkovic/angular-app 上的应用程序。如果您想查看任务表，并添加删除或更新任务，您需要先注册然后登录。

【参考方案1】：

为每个用户创建单独的任务表，您可以创建一个集合结构添加一个具有登录用户名或其键的节点，并在每个节点内添加任务集合。

例如：

  "User1" : 
      tasks : [
            
          taskName : "demotask"    
                ,
        
          taskName : "demotask"    
                    
        ]
  ,

  "User2" : 
      tasks : [
            
          taskName : "demotask"    
                ,
        
          taskName : "demotask"    
                    
        ]
  

Firebase 将登录用户详细信息存储在浏览器存储中，因此您需要检查用户是否登录。 使用*ngIf 可以显示隐藏菜单项。

例如：

//create common helper Service
checkLoginUser() 
        let user = null;

        // Code to check if the user logged in or not.
        // If there is a user in local storage save in the "user" variable.

    return user? true : false;        


// Inject service inside component and store user status in component variable
isUserLoggedIn = this.checkLoginUser();

// Handle Show hide using *ngIf inside template
<ul>
    <li *ngIf="isUserLoggedIn">Tasks</li>
    <li *ngIf="isUserLoggedIn">Add Task</li>
    <li *ngIf="isUserLoggedIn">Logout</li>
</ul>

【参考方案2】：

要为每个用户创建一个表（集合），您需要为他们创建一个子集合。以下是一些基础知识：https://firebase.google.com/docs/firestore/data-model#subcollections

要检查用户是否已登录，请检查以下问题：How do I detect if a user is already logged in Firebase?。使用*ngIf 或类似的东西根据状态更改html。