Logout组件在Logout函数执行之前重定向

Question

我正在制作React应用程序，当登录用户退出时我有一个小问题。"out&quot迹象;按钮是Link元素，它指向Logout组件。然后Logout组件使用发送到后端的访问令牌调用Logout函数，从我的存储中清除用户和访问令牌，页面将用户重定向到Login页面。这一切都工作(用户注销成功)，但我有一些轻微的问题与用户体验。实际上，我的Logout组件在执行Logout函数之前首先尝试重定向到Login页面，然后我的路由器检查是否存在用户(仍然存在)，并将其重定向到主页。在该用户注销并重定向到登录页面之后。我该如何处理?

这里是退出按钮

<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>
);
}

Answer 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的第二个参数，因为它只是一个字符串。