使用 PrivateRoute 响应异步登录检查

Posted 2023-02-22

【中文标题】使用 PrivateRoute 响应异步登录检查

【英文标题】：React async Logincheck with PrivateRoute

【发布时间】：2020-05-26 06:22:20

【问题描述】：

我想在 React 中使用异步 LoginCheck 创建一个 PrivateRoute。我试过这个：

class App extends React.Component 
constructor(props) 
super(props);
this.state = 
loggedIn: false



componentDidMount() 
//ASYNC FUNCTION
setTimeout(() => 
this.setState(loggedIn: true);
, 1000)


render() 

console.log("RENDERED", this.state.loggedIn);

const PrivateRoute = (component: Component, ...rest) => (
      <Route ...rest render=(props) => (
         this.state.loggedIn === true
           ? <Component ...props />
           : <Redirect to="/login" />
      )/>
    )

return(
<Router>
<Switch>
<Route path="/" exact component=Home />
<PrivateRoute path="/private" component=PrivatePage />
</Switch>
</Router>
)

但这不起作用。 在控制台中，它首先显示“RENDERED false”，然后显示第二个“RENDERED true”。因此它使用正确的参数呈现，但在 const PrivateRoute 中，他重定向到登录页面，因此loginIn 为假。 为什么？我能做什么？

【问题讨论】：

这能回答你的问题吗？ Why is my React component is rendering twice?

【参考方案1】：

您可以创建一个函数 checkAuth() 来分隔验证，如下所示

import React from "react";
import 
  BrowserRouter as Router,
  Switch,
  Redirect,
  Route,
 from "react-router-dom";
import Home from "./Home";
import PrivatePage from "./Private";



export default class App extends React.Component 
  constructor(props) 
    super(props);
    this.state = 
      loggedIn: true
    
  

  componentDidMount() 
    //ASYNC FUNCTION
    setTimeout(() => 
      this.setState( loggedIn: false );
    , 1000)
  

  render() 

    console.log("RENDERED", this.state.loggedIn);

    const checkAuth = () => 
      try 
        // To be replaced with your condition
        if (this.state.loggedIn === true) 
          return true;
        

       catch (e) 
        return false;
      
      return false;
    

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

    return (
      <Router>
        <Switch>
          <Route path="/" exact component=Home />
          <PrivateRoute path="/private" component=PrivatePage />
        </Switch>
      </Router>
    )
  

访问 url "http://localhost/private" as loggedIn: true 该路由已授权，但 0.2s 后已登录状态将更新为 false 并且受保护的路由将被重定向到主页。