Question

我已经四处搜寻，但无法找到我所遇到问题的答案，还有其他各种问题，这些问题包含我想要实现的目标，因此可能只是我需要有人帮我看光！

我正在尝试在React应用中实现身份验证，身份验证的主要状态将与一些不敏感的用户信息一起保存在redex存储区isAuthenticated中。这对于控制基于用户（管理员或高级用户等）的内容呈现非常有用。

我的问题是，当用户尝试未经认证而从/login转到/dashboard时，我想致电服务器以验证身份验证令牌是否有效，因为redux最终是客户端边可能会损坏？

我有下面的代码，在使用redux存储时可以使用，但是我想删除它，而是将其替换为对服务器的调用。

import React from 'react';
import { connect } from 'react-redux';
import { Route, Redirect } from 'react-router';

const mapStateToProps = (state) => {
    return {
        isAuthenticated: state.auth.isAuthenticated
    }
};

const ProtectedRoute = ({ component: Component, isAuthenticated, ...rest }) => {
    const canProceed = isAuthenticated;

    return (
      <Route {...rest} render={props => (
          canProceed ? <Component {...props} /> : <Redirect to={'/login'} />
      )} />
    );
};

export default connect(mapStateToProps)(ProtectedRoute);

我厌倦了将签名更改为异步方法，但随后反应正确地告诉了我一个承诺被退回。

我也看到了一些使用componentDidMount()方法的建议，但我希望此检查被阻止，并根据服务器的响应，允许用户继续操作或清除redux存储并发送给他们返回登录页面。

任何建议将不胜感激！

修改

因此，我使用下面的代码来实现所需的代码，但是如果没有先进行路由渲染就无法实现，这似乎有些奇怪，但是我想这背后的原因是某种形式的信息用户界面可以在进行检查时向用户显示，但仍然有点奇怪。

欢迎提出任何改进建议！

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

class ProtectedRoute extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isChecking: true,
            isAuthenticated: false
        };
    }

    componentDidMount() {
        setTimeout(() => {
            this.setState({
                isChecking: false,
                isAuthenticated: true
            })
        }, 5000);
    }

    render() {
        const { component: Component, ...rest } = this.props;

        if(this.state.isChecking) {
            return (
                <Route {...rest} render={() => (
                    <div>LOADING</div>
                )} />
            )
        } else {
            return (
                <Route {...rest} render={props => (
                    this.state.isAuthenticated ? <Component {...props} /> : <Redirect to={'/login'} />
                )} />
            );
        }
    }
}

export default ProtectedRoute;

react-router redux认证服务器端检查

0 个答案: