1
00:00:00,450 --> 00:00:01,380
Nous saluons le retour.

2
00:00:01,470 --> 00:00:10,190
Dans cette vidéo, nous allons nous concentrer sur l'obtention de la barre NAF pour afficher correctement les liens afin que lorsque vous n'êtes pas connecté vous ne voyez se connecter et s'inscrire.

3
00:00:10,260 --> 00:00:17,010
Mais lorsque vous êtes connecté, vous ne voyez que se déconnecter et ensuite nous pouvons également afficher un petit message qui indique signé en tant que.

4
00:00:17,160 --> 00:00:21,620
Et puis le nom d'utilisateur signé dans plusieurs signé en repos manger ce qu'il est.

5
00:00:21,640 --> 00:00:32,620
Au début, il avait tout cela à la fin de la partie pour la vidéo et j'ai commencé à le déplacer dans une vidéo séparée afin qu'ils puissent passer un peu plus de temps à entrer dans certains détails et expliquant comment une partie de cela fonctionne.

6
00:00:32,640 --> 00:00:33,720
Alors, commençons.

7
00:00:33,810 --> 00:00:35,790
Et ce que je vais faire, c'est ouvrir Hetter.

8
00:00:35,970 --> 00:00:36,860
Oui.

9
00:00:37,110 --> 00:00:42,510
Et voici les trois lignes qui sont responsables de ces trois liens ici.

10
00:00:42,510 --> 00:00:47,270
Connectez-vous inscrivez-vous déconnectez-vous afin de vous cacher et de les montrer de façon appropriée.

11
00:00:47,280 --> 00:00:49,940
Nous avons besoin d'ajouter quelques E.J. Esque logique.

12
00:00:50,460 --> 00:00:53,120
Nous allons avoir une déclaration if qui ressemble à ça.

13
00:00:53,130 --> 00:00:54,630
C'est juste un pseudo-code.

14
00:00:54,630 --> 00:01:06,210
Mais si aucun utilisateur ne s'affiche alors, connectez-vous et enregistrez-vous et alors vous verrez le lien de déconnexion.

15
00:01:06,210 --> 00:01:08,100
Bien sûr, ce n'est pas vrai javascript.

16
00:01:08,220 --> 00:01:09,320
Nous devrons travailler là-dessus.

17
00:01:09,450 --> 00:01:28,090
Mais ce que nous allons faire est de passer une variable comme nous l'avons fait ici où nous passons en camping ou nous le faisons à temps ici repassing terrain de camping à moins que nous allons passer un objet utilisateur et que l'utilisateur sera Contiennent des informations sur l'utilisateur connecté ou s'il n'y a pas d'utilisateur connecté.

18
00:01:28,100 --> 00:01:32,960
Il sera vide non défini et nous pouvons utiliser cette variable utilisateur au lieu de notre modèle.

19
00:01:33,150 --> 00:01:34,490
Donc si c'est indéfini.

20
00:01:34,740 --> 00:01:36,850
Nous allons vérifier si l'utilisateur est indéfini.

21
00:01:36,960 --> 00:01:40,800
Montrez-les autrement montrer le journal au lien.

22
00:01:40,800 --> 00:01:45,080
Alors commençons par trouver comment pouvons-nous obtenir ces données sur l'utilisateur.

23
00:01:45,180 --> 00:01:57,520
Et je vais commencer sur l'un de ces itinéraires et je vais faire la page d'accueil des campings qui est ici après avoir obtenu des terrains de camping slash parce que c'est un itinéraire simple et agréable et beaucoup de notre code redirige vers cette route.

24
00:01:58,050 --> 00:02:01,780
Et le secret de tout cela, la partie importante est la demande d'utilisateur direct.

25
00:02:02,040 --> 00:02:05,210
Demandez donc à l'utilisateur de contenir toutes les informations.

26
00:02:05,220 --> 00:02:09,840
Eh bien pas tout cela, mais le nom d'utilisateur et l'ID de l'utilisateur actuellement connecté.

27
00:02:09,860 --> 00:02:10,920
Alors je vais vous montrer.

28
00:02:11,100 --> 00:02:19,720
Faisons juste une annulation que les requêtes de journal à l'utilisateur et démarrent le serveur vers le haut et alors je vais aller rafraîchir.

29
00:02:21,090 --> 00:02:22,310
Et nous obtenons undefined.

30
00:02:22,410 --> 00:02:25,030
Et c'est parce qu'il n'y a pas d'utilisateur actuellement connecté.

31
00:02:25,130 --> 00:02:26,930
Demandez donc aux utilisateurs de vider.

32
00:02:26,980 --> 00:02:27,990
Il n'existe pas.

33
00:02:28,290 --> 00:02:41,090
Mais alors, une fois que je me connecte ce que le passeport va faire est de créer des requêtes que l'utilisateur d'entrer les données utilisateur juste le nom d'utilisateur et l'ID pas le mot de passe ou rien d'autre que le nom d'utilisateur et l'ID à l'intérieur de l'utilisateur demande.

34
00:02:41,460 --> 00:02:52,740
Donc, un log dans le mot de passe de Severus cliquez sur le login Permet d'aller regarder, vous pouvez voir que c'est maintenant demander à cet utilisateur.

35
00:02:52,920 --> 00:02:55,470
Ça va être vraiment utile pour nous dans nos modèles.

36
00:02:55,530 --> 00:02:57,220
Je vais donc passer cela maintenant.

37
00:02:57,270 --> 00:02:58,180
Débarrassez-vous de cela.

38
00:02:58,350 --> 00:03:05,280
Et puis après les terrains de camping nous aurons juste une autre variable Akol utilisateur actuel qui est égal à demander l'utilisateur.

39
00:03:05,460 --> 00:03:10,050
Et puis dans notre modèle, nous pouvons écrire une logique simple qui vérifie s'il ya un utilisateur actuel.

40
00:03:10,320 --> 00:03:15,620
Et puis dans notre modèle, nous pouvons ajouter une logique très simple en utilisant la variable utilisateur actuelle.

41
00:03:15,720 --> 00:03:18,220
So let's save et allons à l'index que.

42
00:03:18,290 --> 00:03:18,750
Oui.

43
00:03:18,780 --> 00:03:22,650
Quel est l'indice des terrains de camping et juste au sommet.

44
00:03:22,800 --> 00:03:32,730
Ajoutons simplement un petit H pour cela, il suffit d'imprimer l'utilisateur actuel et de redémarrer le serveur.

45
00:03:33,880 --> 00:03:46,590
Et si je vais maintenant, nous ne voyons rien, mais si je me connecte plusieurs fois encore, je vois maintenant l'utilisateur actuel.

46
00:03:46,590 --> 00:03:56,850
Donc, nous passons maintenant ces données dans notre modèle, mais plutôt que de l'utiliser au lieu de ce modèle d'index, nous voulons l'utiliser à l'intérieur du modèle de barre de navigation, l'en-tête.

47
00:03:57,240 --> 00:04:01,750
Et n'oubliez pas que nous avons accès à l'une des variables que nous passons à travers notre modèle.

48
00:04:01,890 --> 00:04:03,610
Même à l'intérieur de Parshall's.

49
00:04:03,690 --> 00:04:08,650
Donc, à l'intérieur de chaque nous, nous allons ajouter une déclaration if et il ressemble à cela.

50
00:04:08,760 --> 00:04:30,380
S'il n'y a pas d'utilisateur actuel, nous pourrions faire cela, puis afficher ces deux liens, puis nous aurons notre autre afficher le lien de déconnexion et puis bien sûr nous avons besoin de nos tags Ejaz.

51
00:04:30,540 --> 00:04:38,430
Alors ne faisons pas de signes égaux comme ça.

52
00:04:38,430 --> 00:04:47,990
Et nous sommes presque terminés, donc nous vérifions si une variable utilisateur actuelle est vide alors nous allons les montrer.

53
00:04:48,220 --> 00:04:49,950
Sinon, nous afficherons le lien de déconnexion.

54
00:04:50,320 --> 00:04:58,210
Mais cela ne fonctionnera à l'heure actuelle au moins sur cette route slash terrains de camping parce que nous ne passons pas l'utilisateur actuel à travers sur d'autres routes.

55
00:04:58,300 --> 00:05:00,140
Mais assurez-vous que cela fonctionne.

56
00:05:00,310 --> 00:05:04,660
Je vais donc redémarrer l'application si je rafraîchis la page.

57
00:05:04,750 --> 00:05:05,260
Génial.

58
00:05:05,260 --> 00:05:10,130
Je ne vois que se connecter et s'inscrire et c'est parce que je ne suis pas connecté.

59
00:05:10,450 --> 00:05:19,800
Maintenant, si je clique sur l'ouverture de session, nous aurons un problème qui est que nous avons le fichier d'en-tête et il essaie d'utiliser l'utilisateur actuel, mais nous n'avons pas passer l'utilisateur actuel à travers.

60
00:05:19,990 --> 00:05:28,930
Donc, en fait, cela se passera sur n'importe quelle route qui ont maintenant sont Ackbar parce que nous ne passons pas l'utilisateur actuel à travers sauf sur slash Capgras.

61
00:05:29,500 --> 00:05:35,740
Donc ce que nous voulons faire est de passer l'utilisateur actuel à travers essentiellement cette ligne ici sur chaque itinéraire unique.

62
00:05:36,040 --> 00:05:41,220
Et sur certains d'entre eux il pourrait être vide certains d'entre eux auront des données utilisateur, mais nous voulons qu'il soit disponible sur chaque itinéraire.

63
00:05:41,530 --> 00:05:54,210
Et il ya un moyen facile de faire que nous n'avons pas à ajouter manuellement à chaque itinéraire unique et en haut avant nos itinéraires juste pour ajouter une autre mise à jour après utilisation et nous allons ajouter notre propre middleware peu.

64
00:05:54,430 --> 00:05:57,650
Quelle que soit la fonction que nous lui fournissons sera appelée sur chaque itinéraire.

65
00:05:57,850 --> 00:06:03,420
Donc, nous allons lui donner une réponse à la demande de fonction et nous avons besoin de cette variable suivante aussi.

66
00:06:04,360 --> 00:06:10,180
Et ce que nous voulons faire est de passer cette demande à l'utilisateur à chaque modèle unique et il ya un moyen facile de le faire.

67
00:06:10,260 --> 00:06:12,930
Sake rez locaux.

68
00:06:13,110 --> 00:06:29,040
L'utilisateur actuel demandent à l'utilisateur ce que nous mettons dans le repos à local est ce qui est disponible au lieu de notre modèle et alors l'autre chose vraiment importante est vous devez passer au code suivant réel parce que c'est un middleware qui fonctionnera pour chaque voie simple.

69
00:06:29,080 --> 00:06:31,570
Si nous n'avons pas cette prochaine, il va juste s'arrêter.

70
00:06:31,570 --> 00:06:39,430
Rien ne se produira ensuite alors nous avons besoin d'avoir le prochain afin de passer à ce prochain middleware qui sera en fait le gestionnaire d'itinéraire dans la plupart des cas.

71
00:06:40,090 --> 00:06:45,580
Donc, si nous essayons ce redémarrage, le serveur actualise la page.

72
00:06:45,580 --> 00:06:46,770
Cela devrait fonctionner très bien.

73
00:06:46,900 --> 00:06:52,150
Si je vais me connecter, j'ai maintenant le formulaire de connexion et je ne reçois pas d'erreur.

74
00:06:52,360 --> 00:06:55,330
Et je vois les bons liens parce que je ne suis pas connecté.

75
00:06:55,390 --> 00:07:05,050
Maintenant si je me connecte comme sèvres encore je ne vois que déconnecter grand et essayer de cliquer sur déconnecter.

76
00:07:05,710 --> 00:07:06,180
Impressionnant.

77
00:07:06,190 --> 00:07:07,180
Donc ça marche.

78
00:07:07,210 --> 00:07:12,360
La dernière chose que je voulais faire, c'est que lorsque vous êtes connecté, nous allons le faire une fois de plus.

79
00:07:12,810 --> 00:07:16,360
Vous voulez voir ici plutôt que de vous connecter et de vous inscrire.

80
00:07:16,370 --> 00:07:20,920
Vous voulez voir actuellement connecté en tant que Zephyrus et c'est assez facile à faire.

81
00:07:21,130 --> 00:07:22,290
Au lieu de notre tête chacun.

82
00:07:22,330 --> 00:07:36,200
Oui, nous avons déjà l'utilisateur actuel, donc s'il ya un utilisateur actuel dans cette autre, nous allons simplement ajouter un autre allié et que Ally va simplement ajouter dans le texte.

83
00:07:37,300 --> 00:07:41,300
Faisons signé en tant que.

84
00:07:41,760 --> 00:07:46,050
Et puis nous avons juste interpréter ou nous ajoutons avec chacun comme des balises.

85
00:07:46,060 --> 00:07:54,250
Utilisateur actuel nom d'utilisateur et sauver redémarrer et nous allons voir comment cela ressemble.

86
00:07:54,250 --> 00:07:57,810
Nous pourrions avoir besoin de style un peu rafraîchir.

87
00:07:58,000 --> 00:08:01,030
Mentir à nouveau.

88
00:08:05,860 --> 00:08:07,570
Signé en tant que Severus.

89
00:08:07,660 --> 00:08:09,430
Et oui, nous voulons le style que.

90
00:08:09,430 --> 00:08:20,970
Alors nous allons faire une balise d'ancrage comme les autres et nous allons juste ne pas lui donner une réf H afin que vous puissiez obtenir le doigt de la marque Atra équivaut juste le signe de la livre.

91
00:08:21,040 --> 00:08:25,780
Il pourrait avoir un sens pour que ce soit effectivement un lien vers la page de profil que nous n'avons pas.

92
00:08:25,780 --> 00:08:31,470
Mais si nous avions des pages de profil, vous pouvez cliquer dessus et cela vous mènerait à votre profil, mais c'est très bien pour l'instant.

93
00:08:31,780 --> 00:08:34,070
Donc se déconnecter qui devrait s'en aller.

94
00:08:34,150 --> 00:08:36,330
Essayons d'enregistrer et voir comment cela fonctionne.

95
00:08:36,580 --> 00:08:42,000
Alors je vais m'inscrire comme Mme Purple et le mot de passe sera violet.

96
00:08:42,010 --> 00:08:49,730
Inscrivez-vous et re connectez-vous en tant que Mme Purple et nous pouvons vous déconnecter et nous allons tout vérifier tout.

97
00:08:49,790 --> 00:09:00,120
Que si j'essaie d'ajouter un nouveau commentaire, j'y ai accès, mais si je me déconnecte et que j'essaie de le faire, je ne peux pas.

98
00:09:00,130 --> 00:09:01,550
Il m'a demandé de me connecter en premier.

99
00:09:01,870 --> 00:09:05,690
OK donc nous sommes officiellement fait avec les bases de l'ajout d'auth à Joachim.

100
00:09:05,950 --> 00:09:09,660
Prenons un moment pour examiner les nouvelles choses que nous avons vu dans cette leçon.

101
00:09:09,790 --> 00:09:46,960
En particulier à l'aide de la demande de l'utilisateur que nous définissons ici demande que l'utilisateur sera soit vide si personne n'a signé dans ou il contiendra le nom d'utilisateur dans l'ID de l'utilisateur actuel, nous utilisons une après utilisation qui appellera cette fonction sur Chaque enveloppe unique, donc c'est une bonne façon de sécher ou de code où nous n'avions pas à aller et faire cela sur chaque itinéraire et nous pouvons effectivement s'en débarrasser maintenant parce que nous sommes en passant par l'utilisation ou après 8 ans et puis L'autre chose est que, dans notre modèle, nous venons d'écrire une simple déclaration IF et de combiner cette logique avec chaque TM Peut être vraiment puissant.

102
00:09:46,960 --> 00:09:48,320
Nous pouvons afficher et masquer ces boutons.

103
00:09:48,340 --> 00:09:50,580
Nous pouvons montrer qui est actuellement connecté.

104
00:09:50,830 --> 00:09:52,090
Truc vraiment important.

105
00:09:52,420 --> 00:09:54,900
OK, c'était un peu marathon.

106
00:09:54,910 --> 00:09:57,730
Cinq sections différentes mais nous l'avons obtenu pour travailler.

107
00:09:57,760 --> 00:09:59,400
Nous avons d'abord créé les modèles d'utilisateurs.

108
00:09:59,560 --> 00:10:11,180
Nous avons créé les formulaires d'inscription et les itinéraires d'inscription, puis nous avons ouvert une session, puis nous avons terminé la session et ensuite nous avons travaillé sur la barre de navigation et affiché et masqué les liens et affiché l'utilisateur actuellement connecté.