ReactJs 受保护路由重定向/刷新问题

Question

使用react + react-router-dom ：

import React from 'react';
import { Switch, Route, Redirect } from 'react-router-dom'; 

并以此保护路线：

路由器

const Router = () => {
    return (
        <Switch>
            <PrivateRoute exact path='/Panel' component={Panel}></PrivateRoute>
            <Route exact path='/Register' component={Register}></Route>
            <Route exact path='/Login' component={Login}></Route>
        </Switch>
    );
};

const PrivateRoute = ({ component: Component, ...rest }) => (
    <Route
        {...rest}
        render={props =>
            Auth.getAuth() ? (
                <Component {...props} />
            ) : (
                <Redirect
                    to={{
                        pathname: "/Login"
                    }}
                />
            )
        }
    />
);

认证

const Auth = {
    isAuthenticated: false,
    authenticate() {
        this.isAuthenticated = true;
    },
    signout() {
        this.isAuthenticated = false;
    },
    getAuth() {
        return this.isAuthenticated;
    }
};

所以这工作正常，用户可以轻松登录，注销，但问题是当用户登录时我想将用户重定向到/Panel路由，所以我尝试了：

window.location.href = "/Panel"

或者：

this.props.history.push('/Panel')

两者都再次重定向到/Login太快了，但是如果我单击Panel链接，它将转到Panel路由。 第二个问题是，当我在此地址/Panel上刷新页面时，它再次将我带回/Login 。 所以我要解决的是：

1. 如何重定向到受保护的路由？
2. 在受保护的路由上刷新页面时如何避免重定向？ 如果我键入此地址并输入它也不起作用。

已经看过这个话题并尝试过但没有成功：

使用 React Router 重定向页面的最佳方式是什么？

Answer 1

对于第一个问题：

您可以像这样将 url 保留在 state 中，以便登录后您可以重定向到。

<Redirect
  to={{
    pathname: "/login",
    state: { from: props.location }
  }}
/>

在登录组件中，成功登录后，您可以重定向到：

const { state } = this.props.location;
window.location = state ? state.from.pathname : "/";

对于第二个问题：

一种替代解决方案是将登录 state 保留在 localStorage 中，以便在刷新后应用程序可以从那里读取。 这通常是从登录 api 发送一个 jsonwebtoken 到客户端，并将令牌保存到 localStorage。