Question

我的受保护路线中有一个this.props.auth减速器（如果通过身份验证，则返回用户，否则返回false）。目前，我正在检查this.props.auth是否为false或其中是否包含用户。如果为false，则重定向到/login；如果为true，则使用this.props.auth数据呈现页面。我目前必须以相同的方式重写所有组件的身份验证逻辑。使用户认证支票可重复使用的最佳方法是什么？

受保护的组件代码：

class StaffMeetingsPage extends React.Component {
componentDidMount() {
    document.title = "Staff Meetings";
}

renderContent() {
    console.log(this.props.auth)
    switch (this.props.auth) {
        case null:
            return 'still fetching';
        case false:
            return this.props.history.push('/login');;
        default:
            return <div>Logged in</div>;
    }
}

render() {
    console.log(this.props);
    return(
        <div>
            {this.renderContent()}
        </div>
    );
  }
}

function mapStateToProps(state) {
    return {
        auth: state.authenticationProperty
    };
}

export default connect(mapStateToProps)(StaffMeetingsPage);

登录时登录控制台this.props.auth：

email: "test@mailtest.com" username: "user" _id: "adasdasdasfe3453" __proto__: Object

未登录时控制台登录this.props.auth：

false

Answer 1

我通常创建一个PrivateRoute组件，以检查用户是否已登录（通过prop，redux，localstorage或其他方式）。

类似的东西：

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

const PrivateRoute = ({ isLoggedIn, ...props }) =>
  isLoggedIn
    ? <Route { ...props } />
    : <Redirect to="/login" />

在您的情况下，您可以将此PrivateRoute组件连接到您处理身份验证的状态部分：

function mapStateToProps(state) {
    return {
        isLoggedIn: !!state.authenticationProperty
    };
}

export default connect(mapStateToProps)(PrivateRoute)

然后在路由器中将其用于我的专用路由：）

<Switch>
  <PrivateRoute path="/staff-meetings" component={StaffMeetingsPage} />
  <Route path="/login" component={Login}/>
</Switch>

Answer 2

因为我没有足够的声誉来评论@ 0xc14m1z答案，所以我将在这里回答。

您可以通过在操作运行时向状态添加isLoading属性来显示加载屏幕。

类似这样的东西：

return !isLoading?
   (isLoggedIn
       ? <Route { ...props } />
      : <Redirect to="/login" />
    ): <Loading />

我该如何检查用户的身份验证是否更有效？

2 个答案: