Javascript 登录身份验证后的重定向

我有一个登录屏幕，在那里我通过GraphQLAPI实现了身份验证。身份验证工作正常，我得到了一个令牌，但我不知道如何继续。点击登录按钮后，我想重定向到/panel页面。如果身份验证不起作用，则用户不应访问/panel

/当我使用React路由器时，面板通常工作正常。但我想在单击“登录”按钮后立即访问它。我怎样才能解决这个问题

export default class LoginPage extends Component <{}, { email: string,password: string }>{
  constructor(props: Readonly<{}>) {
    super(props);
    this.state = {
      email: '',
      password: '',
    };
  }

  _SignIn = (e: { preventDefault: () => void; }) => {
    axios({
      url: 'https://xzy/graphql',
      method: 'post',
      headers: {
        'Content-Type': 'application/json',
      },
      data: {
        query: `
            mutation{
               loginMethod(email: "${this.state.email}",
               password: "${this.state.password}")
}`,
      },
    })
      .then((result: { data: any }) => {
        const token = JSON.stringify(result.data.data.loginEmail).slice(1,-1);
        if (token){
          alert(token)
          //return <Redirect to='/users' /> 
        }
      })
      .catch((err: any) => {
        console.log(err);
      });
      e.preventDefault();
  };


  render() {
    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>
          <form style={{width: '100%'}} noValidate>
            <TextField
              variant="outlined"
              margin="normal"
              required
              fullWidth
              id="email"
              label="Email Address"
              name="email"
              autoComplete="email"
              autoFocus
              onChange={e => {
                this.setState({email: e.target.value})
              }}
            />
            <TextField
              variant="outlined"
              margin="normal"
              required
              fullWidth
              name="password"
              label="Password"
              type="password"
              id="password"
              autoComplete="current-password"
              onChange={e => {
                this.setState({password: e.target.value})
            }}
            />
            <FormControlLabel
              control={<Checkbox value="remember" color="primary" />}
              label="Remember me"
            />
            <Button
            onClick={this._SignIn}
            >
            Submit</Button>
            <Grid container>
              <Grid item xs>
                <Link href="#" variant="body2">
                  Forgot password?
                </Link>
              </Grid>
            </Grid>
          </form>
        </div>
        <Box mt={8}>
          <Copyright />
        </Box>
      </Container>
    );
  }
}

导出默认类LoginPage扩展组件{
构造函数（道具：只读）{
超级（道具）；
此.state={
电子邮件：“”，
密码：“”，
};
}
_签名=（e:{preventDefault:（）=>void；}）=>{
axios({
网址：'https://xzy/graphql',
方法：“post”，
标题：{
“内容类型”：“应用程序/json”，
},
数据：{
查询：`
突变{
loginMethod（电子邮件：${this.state.email}），
密码：“${this.state.password}”）
}`,
},
})
.then（（结果：{data:any}）=>{
const token=JSON.stringify（result.data.data.loginEmail）.slice（1，-1）；
如果（令牌）{
警报（令牌）
//返回
}
})
.catch（（错误：任意）=>{
控制台日志（err）；
});
e、 预防默认值（）；
};
render（）{
返回(
登录
{
this.setState（{email:e.target.value}）
}}
/>
{
this.setState（{密码：e.target.value}）
}}
/>
提交
忘记密码了？
);
}
}

您可以将“/users”推到历史记录中， 首次进口

const createHistory = require("history").createBrowserHistory;

然后加上

  let history = createHistory();
history.push("/");

确保已包装您在index.js中的文件 历史

编辑2

  function App() {
  const checkAuth = () => { 
    const token = localStorage.getItem('token');
    if (!token) {
      return false;
    }

    try {
      // { exp: 12903819203 }
      const { exp } = decode(token);

      if (exp < new Date().getTime() / 1000) {
        return false;
      }

    } catch (e) {
      return false;
    }

    return true;
  }

  const AuthRoute = ({ component: Component, ...rest }) => (
    <Route {...rest} render={props => (
      checkAuth() ? (
        <Component {...props} />
      ) : (
          <Redirect to={{ pathname: '/login' }} />
        )
    )} />
  )

  return (
    <div className="row">
      <Router>
        <Switch>
          <AuthRoute exact path="/users" component={Users} />
          <AuthRoute exact path="/panels" component={Panels} />
          <Route exact path="/login" component={Login} />
          <Route exact path="/logout" component={Logout} />
        </Switch>
      </Router>
    </div>
  );
}

函数应用程序（）{
常量checkAuth=（）=>{
const token=localStorage.getItem（'token'）；
如果（！令牌）{
返回false；
}
试一试{
//{exp:12903819203}
const{exp}=解码（令牌）；
if（exp(
(
checkAuth（）(
) : (
)
)} />
)
返回(
);
}

我已经在浏览器路由器中包装我的应用程序。您是否建议将此作为一项补充？如果我使用您的方法，是否只允许我在收到令牌时访问/面板？如果您有路由保护中间件，可以检查令牌是否有效以重定向到正确的路由，是的，我的方法有效-[它对我有效]-检查我帖子的编辑-2。

  function App() {
  const checkAuth = () => { 
    const token = localStorage.getItem('token');
    if (!token) {
      return false;
    }

    try {
      // { exp: 12903819203 }
      const { exp } = decode(token);

      if (exp < new Date().getTime() / 1000) {
        return false;
      }

    } catch (e) {
      return false;
    }

    return true;
  }

  const AuthRoute = ({ component: Component, ...rest }) => (
    <Route {...rest} render={props => (
      checkAuth() ? (
        <Component {...props} />
      ) : (
          <Redirect to={{ pathname: '/login' }} />
        )
    )} />
  )

  return (
    <div className="row">
      <Router>
        <Switch>
          <AuthRoute exact path="/users" component={Users} />
          <AuthRoute exact path="/panels" component={Panels} />
          <Route exact path="/login" component={Login} />
          <Route exact path="/logout" component={Logout} />
        </Switch>
      </Router>
    </div>
  );
}