在React中处理用户验证的重定向？

Posted 2021-04-18

我想知道其他人如何管理已登录其网站的回访者（使用Cookie令牌证明）

目前，我在根组件中使用redux操作，该操作会触发API调用以检查cookie是否有效。

当这回到TRUE的FALSE时，下一个动作取决于用户试图访问的URL。

目前： - 如果用户经过验证并访问/，他们将被发送给/ contacts

• 如果用户未经过验证并且他们访问任何受保护的路线（例如/contacts），则将被踢出/。

问题： - 如果经过验证的用户在转发之前访问/，他们会立即看到登录页面。 - 如果他们访问另一条保护路线，如/form，他们将被踢到/contacts

我知道这两个项目都是在API调用验证用户时暂时未登录的结果。

问题我想知道你在申请中如何处理这个问题？ 1.如果用户登录，则在验证发生时避免看到登录页面.2。如果用户已登录，请将他们带到他们请求的页面？

// App.js路由器

class App extends Component {
    componentWillMount = async () => {
        await this.props.checkLogin();
    }

    render() {
        const { loggedIn } = this.props;
        const myProtectedRoutes = [
            {component: Form, path: "/form", exact: true },
            {component: Contacts, path: "/contacts", exact: true },
            {component: ContactCard, path: "/contacts/card/:clientID", exact: true },
        ]
        return (
            <BrowserRouter basename="/" >
                <div>
                    <NavBar isLoggedIn={loggedIn} />
                    <main>
                        <Switch>
                            <Route exact path="/" component={Login}/>
                            <Route exact path="/logout" component={Logout   }/>
                            {myProtectedRoutes.map( 
                                (d, i) => 
                                <ProtectedRoute
                                    key={i}
                                    isAccessible={ loggedIn ? true : false }
                                    exact
                                    redirectToPath={"/"}
                                    path={d.path}
                                    component={d.component}
                                    />
                            )}
                        </Switch>
                    </main>
                    <footer>
                        <Switch>
                            <Route path="/" component={Footer}/>
                        </Switch>
                    </footer>
                </div>
            </BrowserRouter>
        );
    }
}

// LoginForm.js component =>出现在'/'

class App extends Component {
    constructor(props){
        super(props);
        this.state = {
            emailaddress:   '',
            password:       '',
        }
    }
    onLoginSubmit = (e) => {
        e.preventDefault();

        const { emailaddress, password } = this.state;

        if (emailaddress && password) {
            this.props.doLogin(emailaddress, password, stayloggedin);
        }
    }
    render() {
        let { loggedIn } = this.props

        // If logged in is true go to contacts or
        // I'd like to be able to get to the typed 
        // URL if logged in is true.
        if ( loggedIn ){
            return <Redirect push to={"/contacts"} />
        }
        return (
            <div id="mainloginform" className="container">
                <!-- Login form Fields go here -->
            </div>
        );
    }
}

答案

通常，用户验证和重定向应该在服务器中进行。

在express，当用户请求任何路线（/或/contacts）时，应该发生以下事情

• 检查用户是否有效（使用cookie令牌）
• 如果有效，则将用户重定向到请求的路由。
• 如果无效，请将用户重定向到/（使用req.redirect('/')）

希望这可以帮助！

另一答案

在redux中，做出三个动作是一种常见的模式。考虑在获取期间显示“in_progress”UI？

{ type: 'FETCH_REQUEST' }
{ type: 'FETCH_FAILURE', error: 'Oops' }
{ type: 'FETCH_SUCCESS', response: { ... } }

有关详细信息，请参阅here。