美文网首页
React 初探(十三)

React 初探(十三)

作者: bowen_wu | 来源:发表于2019-02-12 16:05 被阅读7次

概述

之前完成的 Login 是有一些 bug 的,我们是先进入 Home 页面,之后判断是否登录,如果没有登录,就去 Login 页面,此时我们在 Home 页面的 componentWillMountcomponentDidMount 生命周期中 log 一下

Home 页面 log

当我们没有登录时,发现这两个 log 仍然打印了出来

log

这显然不是我们想要的,我们在 Home 页面的 componentDidMount 肯定要进行一些接口的操作,这样会增加我们访问接口的次数。我们将使用路由守卫来解决这个问题

路由守卫

路由守卫是指当用户满足了某些要求之后才可以离开或进入某个页面或者场景的时候使用。比如说只有用户填写了用户名和密码之后才可以进入首页,控制这些要求的就是路由守卫。

实现路由守卫

网上有很多相关的资料,我主要借鉴了这篇文章。我们现有的路由是这样的

路由

之后我们通过更改 routers 目录下的 index.js 文件、router.config.js 文件和 router.js 文件。

index.js 文件

路由的入口文件,将路由表和 router 组件联系起来

router.config.js 文件

这个文件就是一个路由表。它展示了所有的路由

router.js 文件

根据路由是否需要校验(auth 字段)、loginStatuspathname 来进行路由的跳转。路由即组件,通过组件实现路由的跳转。

总结

通过路由守卫我们实现了一下功能

  • 非登录状态下,无法跳转至主页
  • 登录状态下,无法跳转至登录页

解决了之前的 bug,这次主要是没有直接进入 Home 页面,而是直接通过 router.js 组件进行路由跳转。

相关文章

  • React 初探(十三)

    概述 之前完成的 Login 是有一些 bug 的,我们是先进入 Home 页面,之后判断是否登录,如果没有登录,...

  • React Native初探(三)- Mac

    在React Native初探(一) - Mac和React Native初探(二)- Mac中,很简陋但是能用的...

  • React 初探

    原文地址 React 初探 [1.React 简单介绍](https://github.com/laispace/...

  • 探索React源码:Reconciler

    在探索React源码:初探React fiber[https://juejin.cn/post/703562827...

  • (React启蒙)初探React

    初探React 本文翻译自Cody Lindley的《React Enlightenmen》,已获得作者授权,这套...

  • React Native 相关

    React Native 初探 https://www.cnblogs.com/yexiaochai/p/6042...

  • umi框架的使用

    介绍umi umi官方文档 初探 对比以往使用的 create-react-app 搭建react项目,根据需要我...

  • 2018-05-23

    Lottie Android 初探 Lottie是一个支持Android、iOS、React Native,并由 ...

  • Lottie Android 初探

    Lottie Android 初探 Lottie是一个支持Android、iOS、React Native,并由 ...

  • React初探

    1.基本开发环境 选择 reate-react-app或 create-react-app-antd 2.搭建路由...

网友评论

      本文标题:React 初探(十三)

      本文链接:https://www.haomeiwen.com/subject/lcckeqtx.html