react路由守卫的简易实现，以及利用token实现登录和退出

react由于没有自行设置路由守卫。所以登录和退出时需要自己判断是否获得token值并且做出登录和退出的路由跳转操作。首先我们通过接口获得token值。

           window.sessionStorage.setItem('token',res.data.token)
          // console.log(sessionStorage.getItem('token'));
          if(sessionStorage.getItem('token')){
          //刷新页面用来重新渲染app节点
           window.location.reload(true)
          }

然后在app.js中判断是否获得token值。以便做路由切换。

render(){ 
    return sessionStorage.getItem('token') ? (
      <Router>
         
         <Frame>
           <Switch>
          <Route path='/admin' exact component={Admin}></Route>
          <Route path='/houseList' exact component={houseList}></Route>
          <Route path='/addhouseList' exact component={addHouseList}></Route>
          <Route path='/userlist' exact component={UserList}></Route>
          <Route path='/userpower' exact component={UserPower}></Route>
          <Route path='/houseimg' exact component={houseImg}></Route>
          <Route path='/houseanalyse' exact component={houseAnalyse}></Route>
          </Switch>
          </Frame>
         
      </Router>
    ):(
      <Router>
        <Switch>
         <Route path='/login' exact component={Login}></Route>
         <Redirect to='/login' />
        </Switch>
      </Router>
      
    )
  }

如果获得token切换到frame嵌套路由。如果没获得token则重定向到login页面。退出登录直接移除sessionStorge,并再次自动刷新页面退出登录。

         <Button
          type="primary"
          icon={<PoweroffOutlined />}

          onClick={()=>{
           sessionStorage.removeItem('token')
          if(!sessionStorage.getItem('token')){
          window.location.reload(true)
          }}
          style={{position:'absolute',right:'20px',top:'20px'}}
        >
          退出登录
        </Button>

这里用的antd的组件。也可以不使用。