Starts in:
0 DAY
17 HRS
4 MIN
7 SEC
Starts in:
0 D
17 H
4 M
7 S
Open Closed

Why Do All Tabs Reload When Using Refresh Token in Angular with ABP? #8281


User avatar
0
portx-dev created
  • ABP Framework version: v8.3.3
  • UI Type: Angular
  • Database System: EF Core (My SQL)
  • Tiered (for MVC) or Auth Server Separated (for Angular): yes
  • Exception message and full stack trace:
  • Steps to reproduce the issue:
    • 1. Set Access Token Lifetime:
      • Configure the AccessTokenLifetime in your ABP (ASP.NET Core) back-end application to a short duration, such as 2 minutes. This can typically be done in the configuration settings or startup configuration for your authentication options.
    • 2. Open Multiple Tabs:
      • Launch your Angular application and open it in multiple browser tabs.
      • Ensure that all tabs are authenticated using the same session (i.e., logged in with the same user account)
    • 3. Wait for Token Expiry:
      • Wait for the access token to expire after the 2-minute lifetime.
      • Once the token expires, a Refresh Token process should be initiated in one or more tabs to acquire a new access token.
    • 4. Observe the Behavior:
      • Notice that when the refresh token request completes, all the open tabs are reloaded, which might disrupt the user experience.
    • This behavior can be unexpected, and understanding why all tabs reload when one tab initiates the refresh process is critical. This could be related to how the token management or session synchronization is handled across tabs in the ABP framework.
    • After the reload, observe that some screens are redirected to a 403 (Forbidden) page. This may indicate that certain state or authorization checks failed after the token refresh, leading to restricted access on those screens


13 Answer(s)
  • User Avatar
    0
    Anjali_Musmade created
    Support Team Support Team Member

    Hello ,

    Can you check this docuemnt If it is helpful to resolve your issue https://github.com/abpframework/abp/issues/15530

    Thank you.

  • User Avatar
    0
    portx-dev created

    I saw that the problem was reported to be fixed in v7.3. However, I am using v8.3.3. I tried downgrading to v8.2.2, and the problem disappeared. Please check this issue.

  • User Avatar
    0
    portx-dev created

    I tried creating a new project, but the issue still occurs. All pages reload and get logged out.

  • User Avatar
    0
    Anjali_Musmade created
    Support Team Support Team Member

    Hello

    Thanx for reporting us , We will check this , Please Question gathered to here https://abp.io/support/questions/8214 so will creating internal issue for them.

    Thank you.

  • User Avatar
    0
    portx-dev created

    Hi, could you please provide an update on the progress of resolving this issue? Thank you!

  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    Hi,

    Actually, this is a feature : https://github.com/abpframework/abp/issues/19488

    https://github.com/abpframework/abp/pull/19489/files

    When current access_token has been changed, it will reload the page to get the new configuration, settings etc...

  • User Avatar
    0
    portx-dev created

    Hi. But why, when I open only 1-2 tabs, the pages don’t reload after refreshing the access_token? However, when I open more tabs, the pages get reloaded. Could this be a bug? This behavior significantly affects the user experience, especially when users are in the middle of their tasks and the pages reload unexpectedly.

  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    Hi,

    Considering the previous token has expired, I think the user's task will fail even if it is not refreshed.

    when I open only 1-2 tabs, the pages don’t reload after refreshing the access_token

    Could you share some GIF images?

  • User Avatar
    0
    portx-dev created

    Hi. I have recreated the issue and uploaded it to YouTube. You can view it at the link below. https://www.youtube.com/watch?v=GV2ycIuRP68

  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    Hi,

    I see; it could be a problem; we will check it.

  • User Avatar
    0
    portx-dev created

    Did you get the results?

  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    Unfortunately not yet

  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    You can replace the LocalStorageListenerService

    import { Injectable, inject } from '@angular/core';
    
    @Injectable({
      providedIn: 'root',
    })
    export class MyLocalStorageListenerService{
    
      constructor() {
        // do nothing
      }
    }
    

    AppModule

      providers: [
        APP_ROUTE_PROVIDER,
        provideAbpCore(
          withOptions({
            environment,
            registerLocaleFn: registerLocale(),
          }),
        ),
        {
          provide : LocalStorageListenerService,
          useValue : MyLocalStorageListenerService
        },
        .......
      ]
    
Made with ❤️ on ABP v9.1.0-preview. Updated on November 20, 2024, 13:06