ionic-team / ionic-team/ionic-framework

bug: IonRouter continues to trigger PrivateRoute after DOM removal

Đang mở
#23,521 1 bình luận 0 reaction 0 người được giao Xem trên GitHub
package: react type: bug
Ngôn ngữ chính
TypeScript
Star
52.7k
Fork
13.3k
Merge trung bình
1 ngày 14 giờ
Pull request đã merge (30 ngày)
50

Mô tả

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

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Hướng nghiên cứu

Bắt đầu với việc tái hiện trong CodeSandbox, đặc biệt là /src/App.tsx, và thực hiện theo trình tự đăng nhập, chuyển tab và đăng xuất được mô tả trong issue. Xác nhận rằng PrivateRoute vẫn được kích hoạt sau khi trang đã xác thực bị xóa; hoàn tất khi việc điều hướng đến Tab 2 trong trạng thái chưa xác thực không còn chuyển hướng đến trang xác thực.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Đánh giá

Công nghệ
react, typescript
Lĩnh vực
frontend
Loại issue
Lỗi
Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức độ hoạt động
Đình trệ
Độ rõ ràng
Khá rõ ràng
Mức phù hợp với người mới
35/100

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.