authentication - 登录后我想重定向到 jitsiReact 页面

Question

登录并成功将 jwt 令牌存储在 localStorage 中后，如果我已登录，我想将登录重定向到仪表板页面，所以我无法访问登录或注册页面，这就是我想要的，请帮助解决这个问题，我不想要使用 redux

我正在使用受保护的路由器方法进行身份验证并将其导入 app.js 文件

----------
(App.js)
function App() {
  
    const getAuth = localStorage.getItem('user-agent');
    const isAuth = JSON.parse(getAuth);

  return (
    <div className="App">
      <Suspense fallback={loading()}>
        <Switch>
          <Route exact path="/login" name="Login Page" render={props => <Login {...props} />} />
          <Route exact path="/signup" name="Signup Page" render={props => <Signup {...props} />} />
          <AuthRouter path="/" name="Jitsi" isLoggedin={isAuth ? isAuth.isAuthentication : false} component={DefaultLayout} />
        </Switch>
      </Suspense>
    </div>
  );

---------

---------
(AuthRouter.js)

function AuthRouter({ component: Component, isLoggedin, ...rest }) {
    return (
        <Route {...rest} render={(props) => (
            isLoggedin === true ?
                <Component {...rest} {...props} />
                : <Redirect to="/login" />
        )
        } />
    )
}
------------

------------
(Login.js)

export default class Login extends Component {
    constructor(props) {
        super(props);
        this.state = {
            email: '',
            password: '',
            error: ''
        }
    }

    // get the inputs values on change
    handleChange = e => {
        this.setState({
            [e.target.name]: e.target.value
        })
    }

    
    // submit form
    handleLogin = async e => {
        e.preventDefault();
        const res = await fetch('http://localhost:5000/api/login/user', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ ...this.state })
        });
        const json = await res.json();
        if (res.status === 200) {
            const userCredentials = JSON.stringify(json)
            localStorage.setItem('user-agent', userCredentials)
            this.props.history.push('/dashboard')
        } else {
            this.setState({
                ...this.state,
                error: 'Something went wrong!!!'
            })
        }
    }

    render() {
        return (
            <div className="d-flex align-items-center login-form">
                <div className="col-md-5 mx-auto border shadow-sm rounded p-3 p-md-5 bg-light">
                    <p className="text-danger text-center">{this.state.error}</p>
                    <form>
                        <div className="form-group">
                            <label>Email</label>
                            <input type="email" className="form-control" placeholder="Enter your email" name="email" onChange={this.handleChange} />
                        </div>
                        <div className="form-group">
                            <label>Password</label>
                            <input type="password" className="form-control" placeholder="Enter your password" name="password" onChange={this.handleChange} />
                        </div>
                        <div className="text-center">
                            <button onClick={this.handleLogin} type="submit" className="btn btn-primary btn-block">Login</button>
                            <small className="pt-3 d-block">-or-</small>
                            <Link to="/signup" className="btn btn-link">Create new account</Link>
                        </div>
                    </form>
                </div>
            </div>`enter code here`
        )
    }
}
------------

标签： authenticationredirectreact-routerjwt