javascript - 使用 React Hooks 成功认证后跳转到主页

Question

我正在尝试使用社交媒体以及用户名和密码登录。我正在尝试移动到主页一旦身份验证成功，为此我尝试了 useHistory()，但我总是收到未定义历史的错误，因此我正在尝试“react-router-dom”的链接。一旦用户登录它应该显示主页。我保留了 <Link to={userLoggedIn && '/home'}> 的条件，但即使我没有成功登录，我也能够导航到主页。在此功能中，我需要一点帮助。下面是我的代码.... App.js

    import React,  { useEffect, useState} from 'react'
import Header from './components/Header'
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom'
import Login from './components/Login';

function App() {

    const[username, setUsername] = useState('');
    const[userPassword, setUserPassword]  = useState('');
    //const[userLoggedIn, setUserLoggedIn]  = useState(false);
    
    return (
        <Router>
            <div className="app">

                <Switch>
                <Route path="/" exact>
                <Login username={username} setUsername={setUsername}
                userPassword={userPassword} setUserPassword={setUserPassword}
                
                />
            </Route>
            <Route exact path="/home" component={Header}/>
                </Switch>
            </div>
        </Router>
    )
}

export default App

登录.js

import React, { useState} from 'react'
import EmailIcon from '@material-ui/icons/Email';
import FacebookIcon from '@material-ui/icons/Facebook';
import AppleIcon from '@material-ui/icons/Apple';
import '../css-styling/login.css';
import SignUp from '../assets/undraw_shopping_eii3.png'
import LoginPicture from '../assets/undraw_web_shopping_re_owap.png';
import { appleAuth, facebookAuth, googleAuth, auth } from '../firebase/firebase';
import {fetchUsername, userLoggedIn} from '../store/actions'
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';

function Login(props) {
    const {username, userPassword, setUsername, setUserPassword, userLoggedIn, usersState} = props;

    const [containerClass, setContainerClass] = useState(false); //css 
    

    const handleSignup = (e) => {
        e.preventDefault();
        auth.createUserWithEmailAndPassword(username,userPassword).then((userCredential) => {
            if(userCredential){
                let user = userCredential.user;
            let name = user.email.substr(0,user.email.indexOf('@'))
            fetchUsername(name)
            //history.push('/Home');
        }

            setUsername("");
            setUserPassword('');
            userLoggedIn(true);
        }).catch(error => alert(error.message));
    }

    const handleLogin = (e) => {
        e.preventDefault();
        auth.signInWithEmailAndPassword(username, userPassword).then(userCredential => {
            if(userCredential){
                let user = userCredential.user;
            let name = user.email.substr(0,user.email.indexOf('@'))
            fetchUsername(name);
            }
            
            setUsername("");
            setUserPassword('');
            userLoggedIn(true);
        }).catch(error => alert(error.message));
    }

    const handleSocialMediaLogin = (auth1) => {
        auth.signInWithPopup(auth1).then((result) => {
            //let user = result.user;
            if(result.user){
                let name = result.user.email.substr(0,result.user.email.indexOf('@'))
            fetchUsername(name);
            }
        }).then(() => {
            userLoggedIn(true);
        }).catch((error) => {
            console.log(error.message);
            userLoggedIn(false);
          });
    }
    return (
        <div className={`container ${containerClass ? 'sign-up-mode' : ''}`}>
            <div className="forms-container">
                <div className="signin-signup">
                    <form className="sign-in-form">
                        <h2 className="title">Sign in</h2>
                        <div className="input-field">
                            <input onChange={(e) => setUsername(e.target.value)} value={username} type="text" placeholder="[e-mail]"/>
                        </div>
                        <div className="input-field">
                            <input value={userPassword} onChange={e  => setUserPassword(e.target.value)}  type="password" placeholder="password"/> {/**start from here.. */}
                        </div>
                        <Link to={usersState ? '/home' : '/'}><input onClick={e => handleLogin(e)} type="submit" value="login" className="btn solid"/></Link>
                        <p className="social-text">Or Sign in with social platform</p>
                        <div className="social-media">
                                <Link className="social-icon" to={usersState ? '/home':'/'} >
                                <FacebookIcon onClick={() => handleSocialMediaLogin(facebookAuth)} /></Link>
                            <Link className="social-icon" to={usersState ? '/home' : '/'} ><EmailIcon onClick={() => handleSocialMediaLogin(googleAuth)} /></Link>
                            <Link className="social-icon" to={usersState ? '/home':'/'} ><AppleIcon onClick={() => handleSocialMediaLogin(appleAuth)} /></Link>
                        </div>
                    </form>


                    <form className="sign-up-form">
                        <h2 className="title">Sign up</h2>
                        <div className="input-field">
                            <input value={username} onChange={e  => setUsername(e.target.value)} type="text" placeholder="[e-mail]"/>
                        </div>
                        <div className="input-field">
                            <input value={userPassword} onChange={e  => setUserPassword(e.target.value)} type="password" placeholder="password"/>
                        </div>
                        <input onClick={e => handleSignup(e)} type="submit" value="Sign up" className="btn solid"/>
                        <p className="social-text">Or Sign Up with social platform</p>
                        <div className="social-media">
                            <a href="#" className="social-icon">
                                <FacebookIcon onClick={() => handleSocialMediaLogin(facebookAuth)}/>
                            </a>
                            <a href="#" className="social-icon">
                                <EmailIcon onClick={() => handleSocialMediaLogin(googleAuth)}/>
                            </a>
                            <a href="#" className="social-icon">
                                <AppleIcon onClick={() => handleSocialMediaLogin(appleAuth)}/>
                            </a>
                        </div>
                    </form>
                </div>
            </div>


            <div className="panels-container">
                <div className="pannel left-panel">
                    <div className="content">
                        <h3>New here?</h3>
                        <p>Make an account to shop the finest product you will ever found on the interent</p>
                        <button onClick={() => setContainerClass(true)} className="btn transparent" id="sign-up-btn">Sign up</button>
                    </div>

                    <img src={SignUp} className="image" alt=""/>
                </div>

                <div className="pannel right-panel">
                    <div className="content">
                        <h3>One of us?</h3>
                        <p>Sign In to shop the latest product based in the best price on the online market.</p>
                        <button onClick={() => setContainerClass(false)} className="btn transparent" id="sign-up-btn">Sign in</button>
                    </div>

                    <img src={LoginPicture} className="image" alt=""/>
                </div>                
            </div>
        </div>
    )
}

const mapStateToProps = state => {
    console.log("State of users",state.users);
    return {
        usersState: state.users
    }
}

export default connect(mapStateToProps, {fetchUsername, userLoggedIn})(Login)

标签： javascriptreactjsreduxreact-reduxreact-hooks

Answer 1

只需将以下代码添加到您的Login组件中。如果您有正确的react-router-dom使用useHistory钩子版本并且您的Login组件嵌套在路由器组件内，它应该可以工作。

import {useHistory} from 'react-router-dom';

function Login(props) {
    // ...

    const history = useHistory();

    // ...

    history.push('/'); // CALL THIS WHEN YOU WANT TO REDIRECT (EX. AFTER SUCCESSFUL LOGIN)

    // ...
}