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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在React中处理用户验证的重定向?相关的知识,希望对你有一定的参考价值。

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

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

当这回到TRUEFALSE时,下一个动作取决于用户试图访问的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

以上是关于在React中处理用户验证的重定向?的主要内容,如果未能解决你的问题,请参考以下文章

Jsp获取Java的重定向赋值(String)

Django 身份验证 - 错误的重定向 url 到登录页面

React 路由器未在 Chrome 中的重定向上安装组件

如何使用 React Router 的重定向功能?

React.js身份验证在每次刷新时重定向到登录名

反应路由器身份验证重定向