如果身份验证成功，如何从登录页面重定向到主页

Question

我正在从服务响应中检查用户是否已通过身份验证，如果身份验证成功，我想从登录页面重定向到应用程序主页。任何人都可以建议如何实现这一目标。 这是登录.js

import React from 'react';
import Avatar from '@material-ui/core/Avatar';
import Button from '@material-ui/core/Button';
import CssBaseline from '@material-ui/core/CssBaseline';
import TextField from '@material-ui/core/TextField';
import LockOutlinedIcon from '@material-ui/icons/LockOutlined';
import Typography from '@material-ui/core/Typography';
import { makeStyles } from '@material-ui/core/styles';
import Container from '@material-ui/core/Container';
import axios from 'axios'
import { Formik} from 'formik'
import { FormControl } from '@material-ui/core';
import { Redirect } from 'react-router-dom'
export default function SignIn(props) {
const classes = useStyles();
const [ssoId, setSsoId] = React.useState('');
const [password, setPassword] = React.useState('');
const handleSsoIdChange = (e) => {
e.preventDefault();  
setSsoId(e.target.value);
}
const handlePasswordChange = (e) => {
e.preventDefault();  
setPassword(e.target.value);
}
return (
<Container component="main" maxWidth="xs">
<CssBaseline />
<div className={classes.paper}>
<Avatar className={classes.avatar}>
<LockOutlinedIcon />
</Avatar>
<Typography component="h1" variant="h5">
Sign in
</Typography>
<Formik
initialValues={{ ssoId: '', password: ''}}
onSubmit={(values, {setSubmitting, resetForm})=>{
setSubmitting(true);
setTimeout(()=>{
setSsoId(values.ssoId)
setPassword(values.password)
console.log(ssoId)
console.log(password)
axios.get(`http://localhost:5000/authentication/${ssoId}/${password}`)
.then(response => {
console.log(response.data)
if(response.data === 'success'){
return <Redirect to='/admin/aboutUs/whatWeDo' />
}
else{
alert("You have entered wrong credentials")
}
})
resetForm();
setSubmitting(false)
},500)
}}>
{({ handleSubmit })=>(
<form onSubmit={handleSubmit}>
<FormControl  className={classes.form}>
<TextField
variant="outlined"
margin="normal"
required
fullWidth
id="ssoId"
label="SSO ID"
name="ssoId"
autoComplete="sso"
autoFocus
value= {ssoId}
onChange = {handleSsoIdChange}
/>
</FormControl>
<FormControl className={classes.form}>
<TextField
variant="outlined"
margin="normal"
required
fullWidth
name="password"
label="Password"
type="password"
id="password"
autoComplete="current-password"
value= {password}
onChange={handlePasswordChange}
/>
</FormControl>
<Button
type="submit"
fullWidth
variant="contained"
color="primary"
className={classes.submit}
>
Sign In
</Button>
</form>
)}
</Formik>
</div>
</Container>
);
}

这是索引.js代码

import React from "react";
import ReactDOM from "react-dom";
import { createBrowserHistory } from "history";
import { Router, Route, Switch, Redirect } from "react-router-dom";
// core components
import Admin from "layouts/Admin.js";
import SignIn from "layouts/SignIn";
const hist = createBrowserHistory();
ReactDOM.render(
<Router history={hist}>
<Switch>
<Route path="/" component={SignIn} />
<Route path="/admin" component={Admin} />
<Redirect from="/admin" to="/admin/aboutUs/whatWeDo" />
</Switch>
</Router>,
document.getElementById("root")
);

当用户身份验证成功时，必须将应用程序路由重定向到/admin/aboutUs/whatWeDo那么实现这一目标的最佳方法是什么。

Answer 1

好的，如果要重定向到位于项目中的路径，可以使用以下代码执行此操作：

onClick = () => {
if(checkAuth)
this.props.history.push('your route');
}

如果要将用户重定向到不在项目中的路径，请使用以下代码：

onClick = () => {
if(checkAuth)
windows.location.href = 'your route'
}

Answer 2

import React from "react";
import ReactDOM from "react-dom";
import { createBrowserHistory } from "history";
import { Router, Route, Switch, Redirect } from "react-router-dom";
// core components
import Admin from "layouts/Admin.js";
import SignIn from "layouts/SignIn";
const hist = createBrowserHistory();
const loggedRoutes = () => (
<Switch>
<Route path="/" component={SignIn} />
<Route path="/admin" component={Admin} />
<Redirect from="/admin" to="/admin/aboutUs/whatWeDo" />
</Switch>
);
const routes = () => (
<Switch>
<Route path="/" component={SignIn} />
<Route path="/login" component={Admin} />
<Redirect from="/" to="/login" />
</Switch>
);
ReactDOM.render(
<Router history={hist}>
{checkIfAuth? loggedRoutes():routes()}
</Router>,
document.getElementById("root")
);

条件检查 IFAuth 是应用程序的登录状态。也许位于 Redux 或类似的地方。