SpringBoot项目——前端页面授权+注册页面实现+登录状态持久化

发布于:2022-08-08 ⋅ 阅读:(677) ⋅ 点赞:(0)

SpringBoot项目——前端页面授权+注册页面实现+登录状态持久化

回顾:
SpringBoot项目——jwt 登录验证与编写前后端分离API
SpringBoot项目——配置Mysql与session注册登录验证
SpringBoot项目——创建菜单与游戏页面
SpringBoot项目——配置git环境与项目创建


1. 实现前端页面授权

router 中增加属性存储是否需要授权
在这里插入图片描述
引入store中is_login判断是否登录
在这里插入图片描述
router 中增加路由跳转前的执行函数,若为需要授权页面且为登录直接跳转到登录界面
在这里插入图片描述

2. 实现 jwt 注册页面

实现注册页面组件UserAccountRegisterView.vue
在这里插入图片描述
采用ajax调用后端所写注册API
这里的ajax并未放在vuex里:对store的state有修改操作的才需要放在store的mutation里直接修改,或者像ajax这种异步跨域操作的放在action里调用mutation修改。
在这里插入图片描述

3. 实现登录状态的持久化

目前jwt_token存在用户本地,若关闭浏览器或者刷新会使得token删除,从而取消登录状态重定向到登录页面。下面实现将 jwt_token 存在local_storage(浏览器的一小块空间),当关闭浏览器或者刷新时,不会取消登录状态。

刷新后退出登录状态:
在这里插入图片描述
实现刷新后不退出登录状态:
在这里插入图片描述


1、登录成功后将jwt_token存在localStorage
在这里插入图片描述
退出后将jwt_tokenlocalStorage删除。
在这里插入图片描述

登录后查看Local Storage可以看到所存储的jwt_token
在这里插入图片描述

用户重定向到登陆页面的时候,我们可以事先判断有没有将token存在本地LocalStorage,如果存在本地就把token取出来,验证是否过期。如果没有过期,无需重新登陆,可直接跳转到首页。
在这里插入图片描述

刷新之后其实是一个未登录状态,自动先跳到我们的登录页面。先从本地把我们的token取出来,发现token存在把token,更新到我们的内存当中,然后再从云端请求下这个用户的信息。如果可以请求的信息表示我们的token,是有效的,表示用户是登录的,我们就可以跳转到首页。


刷新时闪过登录页面处理+闪过右上角注册登录处理
在这里插入图片描述
在这里插入图片描述

本文含有隐藏内容,请 开通VIP 后查看

网站公告

今日签到

点亮在社区的每一天
去签到