开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 11 天，点击查看活动详情
很多时候，我们都需要在登录的时候根据token做一些权限验证。vue里可以通过vue-router的全局前置守卫直接进行判断，那么我们也可以在react里模拟一下vued-router的router.beforEach（）。下面先给大家上图片，然后对每一张图片进行解释。
首先，我们可以利用react当中的高阶组件。
- 高阶组件的定义：简单的理解为就是接收的参数是一个组件，返回的是一个新组件。
- 高阶组件的作用：可以实现对组件的逻辑复用，是react里逻辑复用的一个手段，当然hooks的提出，是react有了更好的复用逻辑的方式。
自己封装一个AuthComponent高阶组件，组件里的children就是传递进来的组件，children是从组件的props中解构出来的。
逻辑实现：
- 先从本地拿到token进行判断，如果有token，那么就返回刚刚传入的组件。
- 否则，如果没有token，就重定向到登录页面。
token的重要性；token是每次与后端连接时都会携带的当前用户的会话id，可以通过token辨识当前登录用户，是什么角色，从而返回对应的信息。 重定向：这里使用的是v6版本的路由，重定向就使用<navigate/>组件，v5的话使用的是<Redirect/>
下面的代码是写在App.js里的代码。
首先引入刚刚写好的高阶组件，然后在渲染后台详情页的时候，使用这个高阶组件，这个高阶组件中间的组件
<Layout/>就是它通过props.children接收到的组件。
