javascript - 从登录屏幕重定向的问题

Question

提交表单后，我运行 GraphQL 突变。如果成功，我想在返回 token 并将其存储在本地存储中后重定向到私有(private)页面 /panel 。如果没有，我想显示来 self 的 StatusMessage() 函数的错误消息。

问题是，如果登录不成功，错误消息可以正常工作。但如果登录成功，我仍然会被重定向到 /404 而不是 /panel。但是，当我返回 /login 页面时，这次我会自动重定向到 /panel。我不知道第一次出了什么问题。也许 token 晚了几秒钟返回并且重定向发生得更早？

这个问题有解决办法吗？这是我的代码:

function LoginPage (props: any){

  const [isSubmitted, setIsSubmitted] = useState(false);
  const [errorMessage, setErrorMessage] = useState('');
  const [shouldRedirect, setShouldRedirect] = useState(false);

  const [removeUser] = useMutation(LoginMutation);

 // useEffect(() => {
  // if(localStorage.getItem('token')){
  //     setShouldRedirect(true);
 // },[] );


   function submitForm(email: string, password: string) {
     setIsSubmitted(true);
       removeUser({
         variables: {
             email: email,
             password: password,
         },
     }).then(({ data }: any) => {
       localStorage.setItem('token', data.loginEmail.accessToken);
       setShouldRedirect(true);
       //props.history.push("/panel");
     })
     .catch((error: { message: string; }) => {
       setShouldRedirect(false);
       console.log("Error msg:" + error.message);
       setErrorMessage(error.message);
     })
   }
   if(shouldRedirect) return <Redirect to="/panel" />;
     return (
           <Container component="main" maxWidth="xs">
             <CssBaseline />
             <div style={{
               display: 'flex',
               flexDirection: 'column',
               alignItems: 'center'
             }}>
               <Avatar>
                 <LockOutlinedIcon />
               </Avatar>
               <Typography component="h1" variant="h5">
                 Sign in
               </Typography>
               <Formik
                 initialValues={{ email: '', password: '' }}
                 onSubmit={(values, actions) => {
                   setTimeout(() => {
                     alert(JSON.stringify(values, null, 2));
                     actions.setSubmitting(false);
                   }, 1000);
                 }}
                 validationSchema={schema}
               >
                 {props => {
                   const {
                     values: { email, password },
                     errors,
                     touched,
                     handleChange,
                     isValid,
                     setFieldTouched
                   } = props;
                   const change = (name: string, e: any) => {
                     e.persist();                
                     handleChange(e);
                     setFieldTouched(name, true, false);
                   };
                   return (
                     <form style={{ width: '100%' }} 
                     onSubmit={e => {e.preventDefault();
                     submitForm(email, password);}}>
                       <TextField
                         variant="outlined"
                         margin="normal"
                         id="email"
                         fullWidth
                         name="email"
                         helperText={touched.email ? errors.email : ""}
                         error={touched.email && Boolean(errors.email)}
                         label="Email"     
                         value={email}
                         onChange={change.bind(null, "email")}
                       />
                       <TextField
                         variant="outlined"
                         margin="normal"
                         fullWidth
                         id="password"
                         name="password"
                         helperText={touched.password ? errors.password : ""}
                         error={touched.password && Boolean(errors.password)}
                         label="Password"
                         type="password"
                         value={password}
                         onChange={change.bind(null, "password")}
                       /> 
                       {isSubmitted && StatusMessage(shouldRedirect, errorMessage)}

                       <FormControlLabel
                         control={<Checkbox value="remember" color="primary" />}
                         label="Remember me"
                       />
                       <br />
                       <Button className='button-center'
                         type="submit"
                         disabled={!isValid || !email || !password}
                       >                       
                         Submit</Button>
                       <br></br>
                       <Grid container>
                         <Grid item xs>
                           <Link href="#" variant="body2">
                             Forgot password?
                           </Link>               
                       </Grid>
                     </form>
                   )
                 }}
               </Formik>
             </div>
             {/* {submitted && <Redirect to='/panel'/>} */}
           </Container>
     );
 }

 export default LoginPage;

编辑:这就是我进行私有(private)路由的方式:

const token = localStorage.getItem('token');

export const PrivateRoute = ({component, isAuthenticated, ...rest}: any) => {
    const routeComponent = (props: any) => (
        isAuthenticated
            ? React.createElement(component, props)
            : <Redirect to={{pathname: '/404'}}/>
    );
    return <Route {...rest} render={routeComponent}/>;
  };

export default function App() {
  return (
    <div>
      <BrowserRouter>
      <Switch>
      <Route exact path='/' component= {HomePage}></Route>
      <Route path='/login' component= {LoginPage}></Route>
      <PrivateRoute
      path='/panel'
      isAuthenticated={token}
      component={PanelHomePage}
      />
      <Redirect from='*' to='/404' />
      </Switch>
      </BrowserRouter>
    </div>
  );
}

Answer 1

您仅在脚本加载时读取 token 。因此，一旦用户通过登录表单登录应用程序，他就会被重定向到 404，因为您没有从本地存储重新读取 token 。刷新页面后，您就有 token ，因此用户可以登录。

但这并不能解决您的所有问题，因为您没有重新渲染应用程序。您必须让 isLoggedIn 检查应用程序中的某个位置，以确保重新渲染组件。