使用 React Context 阻止登录状态在主页中更改

Posted 2023-04-14

【中文标题】使用 React Context 阻止登录状态在主页中更改

【英文标题】：Stop login state from changing in homepage with React Context

【发布时间】：2021-09-08 11:22:33

【问题描述】：

我尝试使用 React 上下文管理我的应用程序的登录状态。逻辑很简单：如果用户在登录页面通过认证，那么上下文中的登录状态应该更新为true，用户会被引导到首页。我也在使用登录状态和Redirect 来阻止用户访问登录页面。

很遗憾，此方法无法阻止已登录用户查看登录页面。原因是一旦用户成功登录并被重定向到这里，登录状态就会变回false。我觉得我一定做错了什么，但我想不通。

这是我的 React Context 设置：

// LoginContext.js    
export default React.createContext(
    isAuthenticated: null,
    logoutUser: () => ,
    loginUser: () => 
)

这是我放置上下文提供程序的应用组件：

//App.js
class App extends Component 
  state = 
    users: [],
    isAuthenticated: false
  ;

  logoutUser = () => 
    this.setState( accessToken: null, username: null, isAuthenticated: false );
  ;

 loginUser = () => 
    this.setState( isAuthenticated: true )
  

render() 
    const value = 
      isAuthenticated: this.state.isAuthenticated,
      logoutUser: this.logoutUser,
      loginUser: this.loginUser
    
    return (
      <LoginContext.Provider value=value>
        <div>
          <Switch>
            <Route
              exact path="/"
              render=() => (
                <HomePageScreen
                  data=homepage_data
                  recordImpression=this.recordImpression
                />
              )
            />
            <Route path="/login">
              value.isAuthenticated
                ? <Redirect to="/" />
                : <LoginScreen
                  handleLoginFormSubmit=this.handleLoginFormSubmit
                  recordImpression=this.recordImpression
                />
            </Route>
          </Switch>
        </div>
     </LoginContext.Provider>

这是处理登录页面中的表单提交和页面转换的函数：

  handleLoginFormSubmit = async (data, bannerID = '') => 
    const url = `$process.env.REACT_APP_SERVICE_URL/users/login`;
    try 
      const res = await axios.post(url, data)
        .then(res => 
          this.setState( accessToken: res.data.access_token, username: data.username );
          this.loginUser()
          this.props.history.push('/',  newLogin: true );
          // the line below saves the refresh_token to the local storage of the browser
          window.localStorage.setItem("refreshToken", res.data.refresh_token);
          window.localStorage.setItem("username", data.username);
        )
     catch (error) 
      if (bannerID) 
        window.scrollTo(0, 0)
        this.displayBanner(bannerID)
      
    
  ;

【参考方案1】：

如果在上下文中声明另一个状态变量可以跟踪天气重定向是第一次发生或重定向已经发生怎么办？