0

在成功登录并从 API 获取身份验证令牌并将其存储在 sessionStorage 后尝试执行重定向到私有路由。在我的主要应用程序组件中，我使用的是 Switch：

<Switch>
    <Route exact path='/' component={Home} />
    <Route path='/login' component={Login} />
    <PrivateRoute path='/cpanel' component={Cpanel} />
</Switch>

私有路由定义如下：

const PrivateRoute = ({ component: Component, ...rest }) => (

   <Route { ...rest } render = {(props) => (
       sessionStorage.getItem('authToken') === true
         ? <Component { ...props } />
         : <Redirect to='/login' />
    )} />
);

在我的 Login 组件中，handleSubmit 函数如下：

handleSubmit(event) {

    // preventing default form behaviour from submitting..
    event.preventDefault();

    // extracting form data and resetting form fields..
    const form = event.target;
    const data = new FormData(form);
    form.reset();

    // send post request to API..
    axios.post(this.state.uri, {
        email: data.get('email'),
        password: data.get('password')
    })
        .then((response) => {
            // save authorization token in client side..
            sessionStorage.setItem('authToken', response.data.id);
            this.setState({ token: response.data.id });
            console.log('Login successful! Authorization token id: ' + sessionStorage.getItem('authToken'));
            this.props.history.push('/cpanel');
        }).catch((error) => {
            console.log(error);
        });

}

我想这与“this.props.history.push()”有关，因为在我的登录组件的渲染方法中，我在返回 JSX 之前放置了这段代码：

if (sessionStorage.getItem('authToken')) {
    return <Redirect to='cpanel' />
} else {
    console.log('Your authorization token is not set..');
}

我非常感谢任何答案，因为我已经尝试自己解决这个问题 2 天。提前致谢！你们都有美好的一天！

4

0 回答 0