Vue 项目中如何进行用户登录状态判断？

登录的状态我们需要分为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.同时在菜单组件中，动态渲染该用户（角色）的权限菜单