注销组件在执行注销功能之前重定向答案

【问题标题】：Logout component redirects before logout function is executed注销组件在执行注销功能之前重定向
【发布时间】：2021-12-09 00:17:04
【问题描述】：

我正在制作 React 应用程序，但在注销用户时遇到了小问题。 “退出”按钮是Link 元素，它导致注销组件。然后注销组件使用发送到后端的访问令牌调用注销函数，用户和访问令牌从我的商店中清除，页面将用户重定向到登录页面。这一切都有效（用户已成功注销），但我对用户体验有一些小问题。实际上，我的 Logout 组件在执行注销功能之前首先尝试重定向到登录页面，并且我的路由器检查是否有用户（仍然存在），并将他重定向到主页。在该用户注销并重定向到登录页面后。我该如何处理？

这是退出按钮

<Link to='/logout' className='menu-link px-5'>
  Sign Out
</Link>

import React, { useEffect } from 'react';
import { shallowEqual, useDispatch, useSelector } from 'react-redux';
import { Redirect, Switch } from 'react-router-dom';
import * as auth from './redux/AuthRedux';
import { logout } from './redux/AuthCRUD';
import { RootState } from '../../../setup';

export function Logout() {
const accessToken: string = useSelector<RootState>(({ auth }) => auth.accessToken, shallowEqual) as string;
const dispatch = useDispatch();

useEffect(() => {
 logout(accessToken).then((response) => {
   dispatch(auth.actions.logout());
 });
}, [dispatch]);

return (
 <Switch>
   <Redirect to='/auth/login' />
 </Switch>
);
}

【问题讨论】：

标签： javascript reactjs typescript react-router

【解决方案1】：

accessToken 在您发送注销操作时从商店中删除，因此您可以使用它的存在作为您仍然拥有用户的指示。如果您有访问令牌，请显示一个微调器（例如），用户不会注销。如果您没有访问令牌，则您已注销并且可以重定向。

export function Logout() {
    const accessToken: string = useSelector<RootState>(({ auth }) => auth.accessToken, shallowEqual) as string;
    const dispatch = useDispatch();

    useEffect(() => {
        logout(accessToken).then((response) => {
            dispatch(auth.actions.logout());
        });
    }, [dispatch]);

    return accessToken ? <Spinner /> : <Redirect to='/auth/login' />
}

当我在这里时，您不需要 shallowEqual 作为 useSelector 的第二个参数，因为它只是一个字符串。

【讨论】：

已解决，非常感谢