React系列實戰篇：增長登陸（四）

快來加入咱們吧！

"小和山的菜鳥們"，爲前端開發者提供技術相關資訊以及系列基礎文章。爲更好的用戶體驗，請您移至咱們官網小和山的菜鳥們 ( xhs-rookies.com/ ) 進行學習，及時獲取最新文章。javascript

"Code tailor" ，若是您對咱們文章感興趣、或是想提一些建議，微信關注 「小和山的菜鳥們」 公衆號，與咱們取的聯繫，您也能夠在微信上觀看咱們的文章。每個建議或是贊同都是對咱們極大的鼓勵！css

實戰案例(四)：完善留言版登陸

咱們此次學了一些新內容，咱們須要將以前的改版。html

首先咱們須要登陸頁面，而且經過HOC（高階組件）添加鑑權功能。加上路由跳轉，完善頁面。前端

增長路由

yarn add react-router-dom
複製代碼

咱們先加入react-routerjava

修改路由配置

咱們須要修改index.js，以前的index.js中一直只有App.js一個，咱們將路由的配置添加到index.js中。react

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頁面。web

Login 頁面

登陸狀態維護

若是咱們登陸成功後，咱們應該須要有一個地方用於存放是否登陸成功的信息，爲後面鑑權作準備，咱們採用localstorage作數據持久化處理。瀏覽器

this.props.history.replace('/home')
window.localStorage.islogin = '1'
複製代碼

鑑權跳轉

咱們須要在登陸頁面鑑權，咱們讓login頁面在加載完成的時候判斷，若是已經登陸過了，那麼咱們就跳轉到home主頁，這裏咱們採用 react 組件生命週期中的 componentDidMount()方法，在加載完成後進行判斷。bash

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"> <label htmlFor="username">用戶名：</label> <input type="text" id="username" value={this.state.username} onChange={(e) => { this.setState({ username: e.target.value }) }} /> </div> <div className="formItem"> <label htmlFor="password">密碼：</label> <input type="password" id="password" value={this.state.password} onChange={(e) => { this.setState({ password: e.target.value }) }} /> </div> <div className="loginBtn" onClick={() => { this.handleLogin() }} > 登陸 </div> </form> </div>
    )
  }

  handleLogin() {
    if (this.state.username && this.state.password) {
      this.props.history.replace('/home')
      window.localStorage.islogin = '1'
      alert('歡迎！')
    } else {
      alert('請輸入用戶名和密碼！')
    }
  }
}

export default Login
複製代碼

不須要組件微信

上次咱們將InputCompoent輸入框組件和EvaluateCompoent列表展現組件抽象出來放置於 component 文件夾中，咱們先將這兩個組件直接放置於App.js中。

咱們只須要抽象一個comment組件，給上次的EvaluateCompoent列表展現組件加上咱們的點贊功能，每一個列表中的評論咱們均可以進行點贊。

所以咱們將首頁App.js修改成以下：

import React, { PureComponent } from 'react'
import Comment from './comment'
import './App.css'

class App extends PureComponent {
  constructor() {
    super()
    this.state = {
      title: 'Hello React',
      desc: '你知道有這麼一個團隊嗎？他們懷揣夢想，艱苦奮鬥，做爲一羣大學生菜鳥，放棄了平時娛樂的時間，選擇一塊兒學習，一塊兒成長，將平時學習的筆記，心得總結爲文章，目的很簡單，但願能夠幫助向他們同樣的菜鳥們？你想了解更多嗎？快搜索微信公衆號：小和山的菜鳥們，加入他們吧！',
      comments: [
        {
          headPortrait: 'https://xhs-rookies.com/img/rookie-icon.png',
          time: new Date(2021, 4, 14, 21, 2, 30),
          nickName: '小菜鳥',
          detail: '這是一個即將推出系列文章的團隊，咱們一塊兒期待他們的做品吧！',
          liked: true,
          likeNum: 23,
        },
      ],
      text: '',
    }
  }

  render() {
    const { title, desc, comments, text } = this.state
    return (
      <div className="App"> <h2>{title}</h2> <div className="desc">{desc}</div> <div style={{ width: '100%' }}> <p className="commentsTitle">評論</p> {comments.map((item, index) => { return ( <Comment key={item.time.getTime()} changeLike={() => { this.changeLike(index) }} {...item} /> ) })} </div> <div className="newComment"> <div style={{ display: 'flex' }}> <img src="https://xhs-rookies.com/img/rookie-icon.png" className="" alt="" /> <textarea value={text} onChange={(e) => this.changeText(e)} placeholder="請輸入評論" /> </div> <div className="submit" onClick={() => { this.addComment() }} > 發表 </div> </div> </div>
    )
  }

  changeText(e) {
    this.setState({ text: e.target.value })
  }

  changeLike(index) {
    let newArray = [...this.state.comments]
    let newItem = { ...newArray[index] }
    if (newItem.liked) {
      newItem.liked = false
      newItem.likeNum -= 1
    } else {
      newItem.liked = true
      newItem.likeNum += 1
    }
    newArray[index] = newItem
    this.setState({
      comments: newArray,
    })
  }

  addComment() {
    if (!this.state.text) {
      alert('請輸入留言內容')
      return
    }
    let detail = this.state.text
    this.setState({ text: '' })
    let newComment = {
      headPortrait: 'https://xhs-rookies.com/img/rookie-icon.png',
      time: new Date(),
      nickName: '小菜鳥',
      detail,
      liked: false,
      likeNum: 0,
    }
    this.setState({
      comments: [newComment, ...this.state.comments],
    })
  }
}

App.propTypes = {}

export default App
複製代碼

主頁修改

主頁鑑權

這裏咱們也須要鑑權，也就是說，若是在瀏覽器內直接輸入home的時候，若是沒有登陸，咱們則須要讓其跳轉至login登陸頁面.

咱們是否可使用和登陸同樣的時候，在加載完成後，判斷而後跳轉呢？

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

這裏其實有問題，咱們若是在加載完成直接判斷後跳轉，是否每一個頁面都要加入呢？

可是這個鑑權實際上是一個通用功能，若是如今還有一個我的信息頁面的話，是否是也須要這麼一個功能呢？

高階組件鑑權

咱們採用高階組件進行鑑權，那麼之後每一個頁面若是須要鑑權，都只須要經過高階組件包裹便可。

import React from 'react'
import { Redirect } from 'react-router-dom'

export default function checkRole(WrapperComponent) {
  let localStorage = window.localStorage
  return (props) => {
    if (localStorage.islogin === '1') {
      return <WrapperComponent {...props} />
    } else {
      return <Redirect to="/" />
    }
  }
}
複製代碼

而後咱們將Home主頁（App.js）進行包裹

export default checkRole(App)
複製代碼

登出選項

咱們登陸成功後，那麼咱們天然在主頁面須要加入登出的選項，再登出後，再次進入主頁面就會被鑑權斷定跳轉至登陸頁面。

handleLogout() {
    window.localStorage.islogin = '0'
    this.props.history.replace("/login")
  }
複製代碼

最終的主頁面以下：

import React, { PureComponent } from 'react'
import Comment from './comment'
import checkRole from './checkRole'
import './App.css'

class App extends PureComponent {
  constructor() {
    super()
    this.state = {
      title: 'Hello React',
      desc: '你知道有這麼一個團隊嗎？他們懷揣夢想，艱苦奮鬥，做爲一羣大學生菜鳥，放棄了平時娛樂的時間，選擇一塊兒學習，一塊兒成長，將平時學習的筆記，心得總結爲文章，目的很簡單，但願能夠幫助向他們同樣的菜鳥們？你想了解更多嗎？快搜索微信公衆號：小和山的菜鳥們，加入他們吧！',
      comments: [
        {
          headPortrait: 'https://xhs-rookies.com/img/rookie-icon.png',
          time: new Date(2021, 4, 14, 21, 2, 30),
          nickName: '小菜鳥',
          detail: '這是一個即將推出系列文章的團隊，咱們一塊兒期待他們的做品吧！',
          liked: true,
          likeNum: 23,
        },
      ],
      text: '',
    }
  }

  render() {
    const { title, desc, comments, text } = this.state
    return (
      <div className="App"> <span className="logout" onClick={() => { this.handleLogout() }} > 退出登陸 </span> <h2>{title}</h2> <div className="desc">{desc}</div> <div style={{ width: '100%' }}> <p className="commentsTitle">評論</p> {comments.map((item, index) => { return ( <Comment key={item.time.getTime()} changeLike={() => { this.changeLike(index) }} {...item} /> ) })} </div> <div className="newComment"> <div style={{ display: 'flex' }}> <img src="https://xhs-rookies.com/img/rookie-icon.png" className="" alt="" /> <textarea value={text} onChange={(e) => this.changeText(e)} placeholder="請輸入評論" /> </div> <div className="submit" onClick={() => { this.addComment() }} > 發表 </div> </div> </div>
    )
  }

  handleLogout() {
    window.localStorage.islogin = '0'
    this.props.history.replace('/login')
  }

  changeText(e) {
    this.setState({ text: e.target.value })
  }

  changeLike(index) {
    let newArray = [...this.state.comments]
    let newItem = { ...newArray[index] }
    if (newItem.liked) {
      newItem.liked = false
      newItem.likeNum -= 1
    } else {
      newItem.liked = true
      newItem.likeNum += 1
    }
    newArray[index] = newItem
    this.setState({
      comments: newArray,
    })
  }

  addComment() {
    if (!this.state.text) {
      alert('請輸入留言內容')
      return
    }
    let detail = this.state.text
    this.setState({ text: '' })
    let newComment = {
      headPortrait: 'https://xhs-rookies.com/img/rookie-icon.png',
      time: new Date(),
      nickName: '小菜鳥',
      detail,
      liked: false,
      likeNum: 0,
    }
    this.setState({
      comments: [newComment, ...this.state.comments],
    })
  }
}

App.propTypes = {}

export default checkRole(App)
複製代碼

總結

到這裏咱們整個React實戰案例就結束了，雖然就是一個簡簡單單的留言案例，可是卻包含了不少知識點，從開始的HTML到腳手架建立。

加入了首頁鑑權，使用PropTypes檢查傳進來的數據是否符合要求，經過HOC（高階組件）來增長通用組件功能。

直接預覽

咱們建議採用 codesanbox 的形式能夠在線快速訪問當前實戰案例。

CodeSandBox

下節預告

到這裏，咱們 React 相關基礎知識已學習完畢，下一節咱們將向更高的山峯前進 —— Hooks，敬請期待吧！