10、登录拦截
参考 8.needLogin.js
登录拦截说起来比较高大上,其实很简单。
需要组件:
- 登录功能组件;
- 受保护组件(需要登录后才能访问);
- 受保护组件的父组件(可选,如果 1 和 2 不是同一个路径,则需要,否则可以不需要)(用于进入受保护组件之前,检查登录信息,不符合要求则跳转到登录组件);
逻辑:(有父组件,登录和受保护组件不是同一个路径)
- 尝试访问受保护组件;
- 首先进入父组件,检查存储登录信息的对象,确认当前是否登录;
- 如果已登录,则允许访问受保护组件;
- 如果未登录,则触发重定向,进入登录组件;
- 登录组件输入信息,尝试登录;
- 输入信息符合要求后(不符合则报错),将信息写入存储登录信息的对象,并跳转到受保护组件的路径;
- 登录后,如果需要登出,则清除登录信息,并再次进行页面跳转;
比较核心的就是几点:
- 进入受保护页面时,需要先检查一下登录信息;
- 登录和登出时,除了写入和清除登录信息之外,还需要进行一次路径跳转(登录 -> 受保护页面,受保护页面 -> 未登录时的默认页面)(如何重定向参照【10】);