React-router(10)登录拦截

x33g5p2x  于2022-03-06 转载在 其他  
字(0.5k)|赞(0)|评价(0)|浏览(229)

10、登录拦截

DEMO地址
参考 8.needLogin.js

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

需要组件:

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

逻辑:(有父组件,登录和受保护组件不是同一个路径)

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

比较核心的就是几点:

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

相关文章