在 React.js 中注销一个选项卡时，如何注销一个浏览器中的所有选项卡？答案

【问题标题】：How to log out all tabs in one browser when one tab is logged out in React.js?在 React.js 中注销一个选项卡时，如何注销一个浏览器中的所有选项卡？
【发布时间】：2018-11-17 15:17:22
【问题描述】：

我是 React 新手。我想知道在 React.js 中注销一个选项卡时如何自动注销一个浏览器中的所有选项卡。（不使用 redux）我使用 JWT 并将 JWT 存储在本地存储上。请任何人帮助我。谢谢。

【问题讨论】：

构建在本地存储中轮询令牌状态的东西
请展示你到目前为止所做的尝试。
当您从 tab-2 注销时，是否要将用户发送到 tab-1 上的登录页面？

标签： javascript reactjs

【解决方案1】：

1) 在组件挂载时编写此代码并在从存储中删除令牌时调用 addEventListener 上的操作

    useEffect(() => {
    const handleInvalidToken = e => {
      if (e.key === 'token' && e.oldValue && !e.newValue) {
        // Your logout logic here

        console.log(e)
        logoutAction(history);

      }
    }
    window.addEventListener('storage', handleInvalidToken)
    return function cleanup() {
      window.removeEventListener('storage', handleInvalidToken)
    }
  }, [logoutAction])

2) 在注销时 logoutAction 将如下所示 - Redux Action

export const logoutAction = (history) => dispatch => {
  dispatch({ type: LOGOUT });
  history.push('/signin')
};

3) 在 Logout Reducer 中看起来像下面的代码 - Redux Reducer。

case LOGOUT:
        localStorage.removeItem('token');
        return {
          ...state,
          token: null,
          isAuthenticated: false,
          loading: false
        };

【讨论】：

【解决方案2】：

添加一个事件监听器来跟踪localStorage中jwt的变化。

useEffect 示例：

useEffect(() => {
    const handleInvalidToken = e => {
      if (e.key === 'accessToken' && e.oldValue && !e.newValue) {
        // Your logout logic here
        logout()
      }
    }

    window.addEventListener('storage', handleInvalidToken)

    return function cleanup() {
      window.removeEventListener('storage', handleInvalidToken)
    }
  }, [logout])

【讨论】：

【解决方案3】：

你可以使用https://github.com/tejacques/crosstab或者自己实现类似的东西

【讨论】：