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

时间:2019-10-31 07:26:28

标签: javascript reactjs

使用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"

OR:

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

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

  1. 如何重定向到受保护的路由?
  2. 在受保护路由上刷新页面时,如何避免重定向? 如果我输入此地址并输入也无法使用。

已经看过这个主题,并且尝试过但没有成功:

What is the best way to redirect a page using React Router?

1 个答案:

答案 0 :(得分:1)

第一个问题:

您可以将url保持这种状态,以便登录后可以重定向到。

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

在“登录”组件中,成功登录后,您可以重定向到:

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

第二个问题:

一种替代解决方案是将登录状态保留在localStorage中,以便刷新后可以从那里读取应用程序。通常是通过从登录api向客户端发送jsonwebtoken并将令牌保存到localStorage来完成的。