React 系列实战篇：增加登录（四）

实战案例(四)：完善留言版登录

我们这次学了一些新内容，我们需要将之前的改版。

首先我们需要登录页面，并且通过HOC（高阶组件）添加鉴权功能。加上路由跳转，完善页面。

增加路由

yarn add react-router-dom

我们先加入react-router

修改路由配置

我们需要修改index.js，之前的index.js中一直只有App.js一个，我们将路由的配置添加到index.js中。

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <Switch>
        <Route path="/login" component={Login} />
        <Route path="/home" component={App} />
        <Redirect path="/" to="/login" exact />
      </Switch>
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root'),
)

默认情况下，我们让页面指向Login页面。

Login 页面

登录状态维护

如果我们登录成功后，我们应该需要有一个地方用于存放是否登录成功的信息，为后面鉴权做准备，我们采用localstorage做数据持久化处理。

this.props.history.replace('/home')
window.localStorage.islogin = '1'

鉴权跳转

我们需要在登录页面鉴权，我们让login页面在加载完成的时候判断，如果已经登录过了，那么我们就跳转到home主页，这里我们采用 react 组件生命周期中的 componentDidMount()方法，在加载完成后进行判断。

  componentDidMount() {
    let localStorage = window.localStorage
    if (localStorage.islogin === '1') {
      this.props.history.replace("/home")
    }
  }

最终组合

class Login extends PureComponent {
  componentDidMount() {
    let localStorage = window.localStorage
    if (localStorage.islogin === '1') {
      this.props.history.replace('/home')
    }
  }

  constructor(props) {
    super(props)
    this.state = {
      username: '',
      password: '',
    }
  }

  render() {
    return (
      <div className="login">
        <h2>欢迎来到XXX博客区</h2>
        <form className="form">
          <div className="formItem">