React 登录态的简单实现

 

 

问题描述：刚开始学习React ，项目需要有一个登录界面，实现登录功能。第一想法当然是在仓库（redux的reducer中）中创建一个islogin字段标识登录状态（默认为fasle）。但是在调试过程中，登录成功之后，显示到其他界面，刷新就会直接跳转到登录界面。

原因：因为界面刷新之后会重置静态资源。（或者说你的react项目的仓库中的那些默认值都要被重置，比如那个islogin字段，结果就是fasle，所以就返回登录界面了）

解决办法：

     这个办法是一个笨办法，但是我的确解决了我当前的问题，如果以后水平提升了会写出新的方法。

     使用sessionStorage，详细描述可以参考下菜鸟教程https://www.runoob.com/jsref/prop-win-sessionstorage.html

此外它以下特性：

sessionStorage 属性允许在浏览器中存储 key/value 对的数据。

sessionStorage 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

 这正好符合我对于登录功能的要求。设置一个key/value字段保存login状态即可。至于如何设置key，获取key值可以参考文档。

   下面是login的函数，登录按钮触发这个函数

login(account,password)
  {
    axios.post('/login',{account:account,password:password}).then((res)=>{
      sessionStorage.setItem('login',res.data.status);
      console.log(res.data.status);
      if(res.data.status){
        this.props.history.push('/');
      }
    }).catch((err)=>{
        console.log(err);
    })
  }

下面这段是进入其他页面时的登录状态判断 

class Content extends Component {
  render(){
    if(sessionStorage.getItem('login')==='true'){
        return (
          <div>
          <Header/>
          <Search/>
          <Footer/>
          </div>
      );
    }
    else{
       return <Redirect to='/login' />
     } 
   }
}

总的来说，这个方法解决问题解决的很不美观，而且可能还有一些不太正确的用法。但是在确实可以解决这个问题。如何有更加好的方法或者工具，也欢迎评论和私信我。