React-router（10）登录拦截

10、登录拦截

DEMO地址

参考 8.needLogin.js

登录拦截说起来比较高大上，其实很简单。

需要组件：

1. 登录功能组件；
2. 受保护组件（需要登录后才能访问）；
3. 受保护组件的父组件（可选，如果 1 和 2 不是同一个路径，则需要，否则可以不需要）（用于进入受保护组件之前，检查登录信息，不符合要求则跳转到登录组件）；

逻辑：（有父组件，登录和受保护组件不是同一个路径）

1. 尝试访问受保护组件；
2. 首先进入父组件，检查存储登录信息的对象，确认当前是否登录；
3. 如果已登录，则允许访问受保护组件；
4. 如果未登录，则触发重定向，进入登录组件；
5. 登录组件输入信息，尝试登录；
6. 输入信息符合要求后（不符合则报错），将信息写入存储登录信息的对象，并跳转到受保护组件的路径；
7. 登录后，如果需要登出，则清除登录信息，并再次进行页面跳转；

比较核心的就是几点：

1. 进入受保护页面时，需要先检查一下登录信息；
2. 登录和登出时，除了写入和清除登录信息之外，还需要进行一次路径跳转（登录 -> 受保护页面，受保护页面 -> 未登录时的默认页面）（如何重定向参照【10】）；