Πώς να αποσυνδέσετε αυτόματα έναν χρήστη μετά τη λήξη του JWT σε γωνιακή

Φωτογραφία από τον Mahdis Mousavi στο Unsplash

Έτσι μπορείτε να διαβάσετε μερικά μαθήματα, ίσως βυθισμένα λίγο στην τεκμηρίωση και μετά από κάποια ποιότητα χρόνου κωδικοποίησης έχετε μια ωραία πρώτη γωνιακή εφαρμογή με όλα όσα επιθυμείτε ως αρχάριος: Slick design, υλικά συστατικά, προστατευμένες διαδρομές με φρουρούς και ένα σύστημα σύνδεσης ως μέρος ενός backend που έγινε με το NodeJS; ή ήταν Άνοιξη;

Όλα φαίνονται να λειτουργούν, έως ότου περιμένετε, το JSON Web Token έληξε, αλλά συνεχίζετε να βλέπετε αυτή την προστατευμένη προβολή. Πιθανότατα δεν υπάρχει biggie, ο χρήστης δεν μπορεί πραγματικά να αλληλεπιδράσει με το backend, γιατί καλά, το κουπόνι έχει λήξει, αλλά σίγουρα αυτό είναι μια λεπτομέρεια που πρέπει να γυαλιστεί. Πληκτρολογήστε RxJS.

Εάν κωδικοποιήσατε αυτό το θέμα, μπορείτε να αγγίξετε ήδη κάποια RxJS και να δείτε μια δέσμη των παρατηρητών γύρω. Εάν δεν είναι πραγματικά, εδώ είναι ένας γρήγορος ορισμός από την ιστοσελίδα του έργου:

Το RxJS είναι μια βιβλιοθήκη για αντιδραστικό προγραμματισμό που χρησιμοποιεί τα παρατηρητήρια, για να είναι πιο εύκολη η σύνταξη ασύγχρονου κώδικα ή κώδικα που βασίζεται στο callback.

Υπηρεσίες προς διάσωση

Θα υποθέσω ότι έχετε τη λογική Auth σε μια ειδική υπηρεσία auth. Αυτό συμβαίνει επειδή η κατάσταση του χρήστη δεν μπορεί να εξαρτάται από ένα μόνο στοιχείο.

Χωρίς άλλο λάθος, ας δούμε κάποιο κώδικα.

Ροή ελέγχου ταυτότητας χρήστη

Σε αυτήν την εφαρμογή δείγματος έχουμε μια βασική ροή Auth με 3 βήματα, όπου ο χρήστης συνδέεται (η εφαρμογή αποθηκεύει κάπου το JWT), ο χρήστης αλληλεπιδρά με το backend χρησιμοποιώντας προστατευμένες διαδρομές / προβολές (τα αιτήματα Http παρεμποδίζονται και επισυνάπτεται μια κεφαλίδα εξουσιοδότησης σε αυτούς) και, τέλος, ο χρήστης αποσυνδέεται ή το JWT λήγει, όποιο από τα δύο συμβεί πρώτο.

Λογική σύνδεσης

Από το στοιχείο σύνδεσης, στέλνουμε τα διαπιστευτήρια χρήστη στο backend. Εάν όλα είναι εντάξει, τότε καλούμε τη μέθοδο storeUserData (), η οποία αποθηκεύει το JWT και το όνομα χρήστη στο Storage Session, υπολογίζει τον χρόνο που απομένει για να λήξει αυτό το διακριτικό και τέλος καλεί τον expirationCounter () για να αναλάβει την εργασία.

Λογική μετρητή λήξης JWT

Ας ασχοληθούμε τώρα με την πραγματική αναμονή-για-το-token-να-εκπνεύσει-να-αντιδράσει. Πρώτον, θέλουμε να απαλλαγούμε από προηγούμενες συνδρομές. Αυτό το κάνουμε ζητώντας να καταργήσετε την εγγραφή σας, να συγχωρήσετε την πλεονασμού, την ιδιότητα Subscription που ορίσαμε στην κλάση.

Στη συνέχεια δημιουργούμε ένα νέο, ας το ξεκινήσουμε περνώντας ένα ψεύτικο Obsible 'of (null)', από το οποίο θα διοχετεύσουμε μια καθυστέρηση ακριβώς του χρόνου που θα μείνει για να λήξει το JWT και τελικά, όταν συμβεί αυτό, καλούμε τη μέθοδο αποσύνδεσης και οδηγούμε τον χρήστη στη σελίδα σύνδεσης.

Αποσύνδεση λογική

Στη μέθοδο αποσύνδεσης, βεβαιώνουμε πρώτα ότι καταργήσαμε την εγγραφή από οποιαδήποτε συνεχή συνδρομή, π.χ. ο χρήστης αποσυνδέθηκε πριν τελειώσει η περίοδος σύνδεσης και τελικά διαγράψαμε τις ιδιότητες κλάσης και την αποθήκευση συνεδριών από όλες τις πληροφορίες σχετικές με την περίοδο σύνδεσης.

Για περισσότερες πληροφορίες δείτε τα έγγραφα ή ακόμα καλύτερα τον εξαιρετικά χρήσιμο οδηγό με παραδείγματα, εξηγήσεις και πόρους για το RxJS.

Ευχαριστώ για την ανάγνωση.