ionic-team / ionic-team/ionic-framework

bug: IonRouter continues to trigger PrivateRoute after DOM removal

オープン
#23,521 コメント 1 件 リアクション 0 件 担当者 0 名 GitHub で見る
package: react type: bug
主要言語
TypeScript
スター
52.7k
フォーク
13.3k
平均マージ
1日 15時間
マージ済み PR(30日)
51

説明

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

コントリビューションガイド

コントリビューションガイドを開く

調査の方向性

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.

索引モデルが issue の本文から書いたものです。

評価

技術スタック
react, typescript
領域
frontend
issue の種類
バグ
難易度
4/5
見積もり時間
3〜5日
活発さ
停滞
明瞭さ
おおむね明確
初心者へのやさしさ
35/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。