javascript - How multi-tab logout can be managed in reactJS? - Stack Overflow

admin管理员组

文章数量:1293367

window.addEventListener('storage', e => {
  if(e.key === 'access_token' && e.oldValue && !e.newValue) {
    store.dispatch(userSignOut());
  }
})

If this is a suitable solution, then where(lifecycle event) should i paste this?

window.addEventListener('storage', e => {
  if(e.key === 'access_token' && e.oldValue && !e.newValue) {
    store.dispatch(userSignOut());
  }
})

If this is a suitable solution, then where(lifecycle event) should i paste this?

• javascript
• reactjs

Share Improve this question Follow asked Nov 12, 2019 at 7:23 Aditya VAditya V 57822 gold badges88 silver badges1818 bronze badges 1

• it is indeed a go-to solution. you can add this in the dashboard ponent's constructor which you show after user login or root ponents constructor. you can also remove this event listener when user logs out or that ponent is unmounted. – Yash Ojha Commented Nov 12, 2019 at 18:53

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 8

The best way to do that is by using the BrodcastChannel feature in Javascript. The Broadcast Channel API allows simple munication between browsing contexts (that is windows, tabs, frames, or iframes) with the same origin (usually pages from the same site).

For example:

// Connecting to a broadcast channel
const userChannel = new BroadcastChannel('user');

function signOut() {
    // and after that, we have to broadcast a message to the user channel which user has signed out from the application as below:
    userChannel.postMessage({
        userId: "", // If the user opened your app in multi-tabs and signed-in with multi accounts, you need to put the userId here to identify which account has signed out exactly
        payload: {
            type: "SIGN_OUT"
        }
    });
}
}

So we created the user's BrodcastChannel but we need to observe on sent messages by user's channel and do the right actions by payload type.

userChannel.onmessage = data => { 
   if(data.payload.type === "SIGN_OUT") {
     // As I talked before about multi-accounts, we need to check the current user id with the sent userId by the userChannel and if they were the same, we have to dispatch the userSignOut action.
     store.dispatch(userSignOut());
   }
}

enter link description here

Try with focus Listener isFocused

Also check

React Navigation emits events to screen ponents that subscribe to them:

willFocus - the screen will focus
didFocus - the screen focused (if there was a transition, the transition 
pleted)
willBlur - the screen will be unfocused
didBlur - the screen unfocused (if there was a transition, the transition 
pleted)

I suppose you should create an action, something like CHECK_CREDENTIALS, and dispatch it on every API call. This way, if you are removing user credentials from localStorage, every tab will be logged out on 1st call.

However, this is something your server should be capable of. When the token is expired/deleted, it is logical that you should get some prehensive error.

本文标签： javascriptHow multitab logout can be managed in reactJSStack Overflow