Question

我是React的新手。我想知道如何在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）在Logout Reducer中看起来像下面的代码-Redux Reducer。

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

Answer 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])

Answer 3

您可以使用https://github.com/tejacques/crosstab或自己实施类似的操作

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

3 个答案: