登录的状态我们需要分为3中情况(具体如下)
1.是否已经登录
2.登录是否已经过期
3.如何让已登录并未过期的用户获得对应的权限
(1)是否已经登录
1.用户登录成功后,后端返回token,前端则将token保存在本地存储当中
2.设置全局前置守卫beforeEach,判断用户访问的页面是否是需要登录才能访问的页面
3.如果用户访问的页面不需要登录,则直接next()通过(如登录、注册页面)
4.如果用户访问的页面需要进行登录,则判断本地存储当中是否有对应的token存在
5.如果本地存储当中没有对应的token存在的话,则说明用户并没有登录,则直接next('/login),跳转到登录页面当中去
6.如果本地存储中有对应的token存在,则说明已登录
(2)登录是否过期
判断用户登录是否过期的主要流程为:
1.在axios请求拦截器中,给所有请求的请求头中统一添加token
2.在所有页面的位置发送的任意一个请求,后端都要对token进行判断
3.如果没有过期则正常处理,如果后端判断为过期后则返回401,在axios响应拦截器中,前端接收到返回的状态码为401后,则需要做出相应的处理(跳转登录界面或者是其他操作)
(3)为已登录的用户获得相应的权限
如果用户登录了并且token也没有过期的话,那么我们则会给他分配对应的权限
1.在全局前置守卫beforeEach中,调用后端提供的接口,获取当前用户能够访问的菜单和路由数据,保存在状态机中
2.继续在全局前置守卫beforEach中,通过router.addRoute方法动态生成路由配置
3.同时在菜单组件中,动态渲染该用户(角色)的权限菜单