ionic-team / ionic-team/ionic-framework

bug: IonRouter continues to trigger PrivateRoute after DOM removal

Offen
#23,521 1 Kommentar 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
package: react type: bug
Vorherrschende Sprache
TypeScript
Sterne
52.7k
Forks
13.3k
Ø Merge
1 T. 15 Std.
Gemergte PRs (30 T.)
51

Beschreibung

# 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!

Beitragsleitfaden

Beitragsleitfaden öffnen

Bewertung

Dieses Issue wurde noch nicht bewertet.

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.