如何将用户重定向到他们在身份验证后尝试访问的任何页面（条件重定向）？

Question

使用 React router dom v 5，由于我对 React 的了解很少，我仍然不知道我错过了什么。我拥有的一些页面要求用户在访问之前进行身份验证。所以我想要一个情况然后用户尝试访问任何需要他登录的页面，他首先被重定向到登录。后他已经登录我希望他被重定向到他试图访问的页面。在我希望用户登录的任何页面中，我在 useEffect 中使用以下内容：

useEffect(() => {

    if (!isAuthenticated) {
        history.push('/login')

    } else {
        dispatch(getCategory())
        }
    }
}, [dispatch])

使用代码，如果用户未通过身份验证，他将被重定向，但在身份验证后，他将被重定向到个人资料页面而不是他试图访问的页面。

function LoginScreen({ isAuthenticated }) {
    const [email, setEmail] = useState('')
    const [password, setPassword] = useState('')

    const dispatch = useDispatch()
    const auth = useSelector(state => state.auth)
    const { error, loading } = auth
    
    const submitHandler = (e) => {
        e.preventDefault()
        dispatch(login(email, password))
    }

    if (isAuthenticated){
        return <Redirect to='/profile' />
    }

它将用户重定向到我在登录组件中指定的页面，而不是将他重定向到他正在尝试的页面访问。我该如何解决这个问题？

Answer 1

您应该在重定向到身份验证页面之前捕获正在访问的当前位置 。将此路由状态发送到登录页面。

const location = useLocation(); useEffect(() => { if (!isAuthenticated) { history.push({ pathname: '/login', state: { from: location; } }); } else { dispatch(getCategory()) } }, [dispatch]);

在 LoginScreen 组件上访问传递的路由状态以获取要重定向回的位置。

function LoginScreen({ isAuthenticated }) { const dispatch = useDispatch(); const { state: { from = "/" } = {} } = useLocation(); const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const auth = useSelector(state => state.auth); const { error, loading } = auth; const submitHandler = (e) => { e.preventDefault(); dispatch(login(email, password)); } if (isAuthenticated){ return <Redirect to={from} />; } ...

如果此身份验证检查不仅仅是针对一个组件进行的，那么您可能希望投资创建一个自定义路由组件，以将此逻辑从 UI 组件中抽象出来。请参阅 RRDv5 auth workflow 示例。

如何将用户重定向到他们在身份验证后尝试访问的任何页面（条件重定向）？

How to redirect a user to any page they try to access after authentication (conditional redirect)?

reactjs

react-router

redux

react-router-dom