Dev Faq
0
votes

Composants d'affichage s'il y a un utilisateur authentifié

Dans une application angulaire 7, j'apprends à mettre en œuvre l'authentification après le document angularfire2 ici . J'ai configuré mon fichier app.component.html comme celui-ci xxx

Donc, s'il y a un utilisateur authentifié, le composant de connexion ne sera pas rendu. J'ai un authentifié.service.ts qui utilise angularfireauth xxx

mon login.component.ts importe le service authentifiant et essaie de signérer l'utilisateur lorsque Ils fournissent l'email et le mot de passe xxx

mon composant de connexion comme prévu et je vois la console.log Message attendu lorsque j'essaie de vous connecter mais que mon avis ne change pas comme prévu - qui est de rendre DIV contenant la zone de navigation et de contenu principal.

Comment puis-je atteindre mon objectif et que je manque quelque chose comme je le fais en ce moment?

2 commentaires

Qu'est-ce que authservice.user est AppComponent?

authservice.user est supposé appeler une instance de angularfireauth.user comme son utilisé ici ici github.com/angular/angularfire2/blob/master/docs/auth/...

3 Réponses :

0
votes

S'abonner à votre Authstate xxx

là, vous pouvez définir votre utilisateur.

0 commentaires
1
votes

Je pense que SignInwithemailandpassword code> doit être asynchreux, vous devez donc attendre qu'il soit résolu: xxx pré>

Je ne suis pas sûr de ce que le type de réponse exacte sera Soyez, mais vous devriez probablement l'enregistrer dans votre service d'authentification: p> xxx pré>

ajoutez votre authservice code> à l'appelcomponent: p>

constructeur (privé myauuthservice: authenticateService) {} code> p>

et recherchez l'utilisateur connecté dans app.component.html code> comme ceci: p> 

<app-login *ngIf="!(myAuthService.user | async)"></app-login>

<div class="container-fluid" *ngIf="(myAuthService.user | async) as user">
  <div class="row">
    <!-- navigation sidebar -->
    <div class="col-2 pt-5" id="sideNav">
      <app-navbar></app-navbar>
    </div>

    <!-- main content area -->
    <main class="col-10 offset-2">
      <router-outlet></router-outlet>
    </main>
  </div>
</div>

1 commentaires

Droite, c'est ce que j'essayais d'atteindre. Une chose en utilisant async a jeté une erreur donc je l'ai appelée sans async et cela a fonctionné. Ce que j'ai fait était de définir l'utilisateur public déclaré dans AuthenticateService Il n'était donc pas nécessaire d'utiliser ASYNC. Maintenant, je peux importer le service n'importe où dans mon application et utiliser l'utilisateur là-bas.

0
votes

Vous pouvez le faire: -

dans Signin.component.ts xxx

in authservice.ts xxx p> Donc, fondamentalement, vous devez rediriger l'endroit où vous souhaitez rediriger à l'aide de routeur.Navigater [(["Your_Route '])]

2 commentaires

Cela vous redirigerait vers la même page de connexion. Ce que je veux, c'est de rendre le contenu principal divisé avec la navigation uniquement lorsqu'il y a un utilisateur après que Signin ait réussi. S'il n'y a pas d'utilisateur, le composant de connexion est rendu, c'est pourquoi je dois vérifier un utilisateur lorsque la page racine est visitée.

J'ai utilisé / pour mon tableau de bord, vous pouvez faire une redirection à tout composant que vous souhaitez utiliser avec Router.Navigate [(["votre itinéraire de votre composant '])]

Articles qui pourrait vous intéresser :

Impossible d'importer le module "@ angular / material"
Interaction profonde avec break and catch
Utilisation de node.js comment renommer tous les fichiers d'un dossier
Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO