首页 前端知识 Vue 项目中如何进行用户登录状态判断?

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

2024-02-15 14:02:04 前端知识 前端哥 350 110 我要收藏

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

转载请注明出处或者链接地址:https://www.qianduange.cn//article/2093.html
标签
评论
发布的文章

01-10jQuery框架

2024-03-01 12:03:59

JS jQuery基础2

2024-03-01 12:03:54

jQuery实现文件上传

2024-03-01 12:03:53

JQuery简介与解析

2024-03-01 12:03:31

jquery上传图片单图多图

2024-03-01 12:03:11

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!