React实现简单路由鉴权的小思路

最近在做毕设，其中后台管理是使用React搭的，那么登录需要用到鉴权，但是React不像Vue，没有路由守卫等API，那么就需要自己实现，主流的是使用高阶组件封装一个含可配置路由表的路由组件，但是我这里提供另外一种实现小思路，但是不算合理，只适用于自己写来玩玩的项目，还请各位读者见谅。

在根组件的渲染的时候通过某个字段如是否已登录，我这里是authed，决定是否渲染组件或登录页

render() {
    return this.state.authed ? (
      /*根组件*/
    ) : <Login handleLogin={this.handleLogin}/>
  }

然后登录组件接收根组件传过来的handleLogin函数，在提交表单并发送网络请求成功后触发即可（我这里用antd的Form表单组件，模拟发送网络请求成功，把用户信息存在sessionStroge中）

const onFinish = (values) => {
    // 发送网络请求查找有无该用户
    // axios.post('http://localhost:3001/api1/users/signin', {
    //   username: encodeURIComponent(values.username),
    //   password: CryptoJS.MD5(values.password).toString()
    // }).then(({status, data}) => {
    //   if(status === 200){
    //     if(data && data.code === 0){
    //       // 保存已登录状态
    //       window.sessionStorage.setItem('isAuth', true)
    //     }else{
    //       message.error(data.msg)
    //     }
    //   }else{
    //     message.error('服务器出错')
    //   }
    // })
    window.sessionStorage.setItem('isAuth', values.username)
    // 这里登录可以用sessionStroge保存
    // 在父组件App挂载时判断有无
    props.handleLogin()
  };

父组件自身的handleLogin函数被触发，调用loadAuth函数

handleLogin = ()=>{  
    this.loadAuth()
    message.success('登录成功')
  }

loadAuth函数如下，当在sessionStroge能够拿到用户信息，说明用户已登录，修改authed值为true，并保存用户信息，否则跳转回登录页，提示用户先登录

loadAuth = ()=>{
    // sessionStroge在浏览器刷新不会消除，等关闭时才消除，
    // 所以刷新时可以先判断用户是否已登录
    const authName = window.sessionStorage.getItem('isAuth')
    if(authName){
      this.setState({authed: true, authName})
    }else{
      if(window.location.pathname !== '/'){
        window.location.pathname = '/' 
      }
      message.error('请先登录')
    }
  }

退出登录的话反之即可，清除用户信息，修改authed值为false，重定向回登录页

handleLogout = ()=>{
    window.sessionStorage.removeItem('isAuth')
    this.setState({authed: false})
    window.location.pathname = '/'
    message.success('退出成功')
  }

演示