ionic-team / ionic-team/ionic-framework

bug: IonRouter continues to trigger PrivateRoute after DOM removal

Ouverte
#23,521 1 commentaire 0 réactions 0 personnes assignées Voir sur GitHub
package: react type: bug
Langage dominant
TypeScript
Étoiles
52.7k
Forks
13.3k
Merge moyen
1 j 15 h
PR mergées (30 j)
51

Description

# Bug Report

**Ionic version:**

[ ] **4.x**
[ x] **5.x**
[ ] **6.x**

**Current behavior:**

I have an application with dynamic tabs that show different tabs depending if the user is authenticated or not. Naturally, I have created a `PrivateRoute` component to protect against users accessing certain pages while unauthenticated. However, I've discovered if the user logs in, visits an authenticated page, and then logs out, the `PrivateRoute` is still triggered even though the component no longer exists in DOM.

**This is a problem because now that the user is not authenticated, the PrivateRoute still triggers and `Redirect`s to the `auth` URL (which is the fallback for unauthenticated users in the PrivateRoute component).**

Here's a video demo:

- On page load, I am on the Log In page (unauthenticated).
- I click login (which authenticates the user and routes the user to the `account` page, which is a PrivateRoute)
- I visit Tab 2 (an unauthenticated route) which has a `logout` button and click it. The user is `Redirected` to the `auth` page automatically, which shouldn't happen because I'm currently on the Tab2 unauthenticated page (but the `PrivateRoute` is still triggered).
- I then try to click `Tab2` to go back, but since the `PrivateRoute` is still being triggered, it's forcing me to stay on the `Login` page. I emphasize this by clicking on the tab2 button alot and you can see the console log counter increasing (that counter is logging from within the private route component).

https://user-images.githubusercontent.com/25097099/123508257-22254780-d623-11eb-8787-3c5d21d0ce99.mov

**Codesandbox**

https://codesandbox.io/s/pensive-voice-1w3rc?file=/src/App.tsx

Steps to reproduce:

1. Visit the Log In Tab
2. Click Log In
3. Click Tab 2
4. Click Log Out
5. Observe how you are unable to click to change any tab and how the private route is still triggered when changing tabs in the console.

Also if you view the DOM, you will see that the `Account` page HTML doesn't even persist in the page, so I was thinking it's just not being evicted from the RouterStack properly?

This one has eluded me for about a whole year, but I believe I finally have a reproducible example!

**Expected behavior:**

I expect the PrivateRoute to not be triggered on pages that are unauthenticated. Admittedly not sure if the title is the best representation of the issue but it's the best I can explain...logically speaking!

**Other information:**

**Ionic info:**

![image](https://user-images.githubusercontent.com/25097099/123508519-c6f45480-d624-11eb-9e11-6874e14f706e.png)

I pulled the latest from `ionic start` and uploaded it to StackBlitz!

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Start with the reproduction in the CodeSandbox, particularly /src/App.tsx, and follow the login, tab-switching, and logout sequence described in the issue. Confirm that PrivateRoute is still triggered after the authenticated page is removed; done means unauthenticated Tab 2 navigation no longer redirects to the auth page.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
react, typescript
Domaine
frontend
Type d'issue
Bug
Difficulté
4/5
Temps estimé
3-5 jours
Activité
À l'abandon
Clarté
Plutôt claire
Accessibilité débutants
35/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.