React 初探（十三）

概述

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

Home 页面 log

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

log

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

路由守卫

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

实现路由守卫

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

路由

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

index.js 文件

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

router.config.js 文件

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

router.js 文件

根据路由是否需要校验（auth 字段）、loginStatus 和 pathname 来进行路由的跳转。路由即组件，通过组件实现路由的跳转。

总结

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

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

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