React系列实战篇:增加登录(四)

·  阅读 2297
React系列实战篇:增加登录(四)

快来加入我们吧!

"小和山的菜鸟们",为前端开发者提供技术相关资讯以及系列基础文章。为更好的用户体验,请您移至我们官网小和山的菜鸟们 ( xhs-rookies.com/ ) 进行学习,及时获取最新文章。

"Code tailor" ,如果您对我们文章感兴趣、或是想提一些建议,微信关注 “小和山的菜鸟们” 公众号,与我们取的联系,您也可以在微信上观看我们的文章。每一个建议或是赞同都是对我们极大的鼓励!

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

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

首先我们需要登录页面,并且通过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">
            <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,敬请期待吧!

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改