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

Question

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

Answer 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) 在 LogoutReducer 中，类似于下面的代码 - ReduxReducer。

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