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

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、localStorage中存储jwt_token处理(store中)

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

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

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


刷新时闪过登录页面处理

1、全局存储记录是否时拉去信息的过程,若是则不显示登录页面。并写相应方法修改。
在这里插入图片描述
2、 v-if控制是否显示login里的content
在这里插入图片描述
3、实现本地localStorage所存jwt_token不合法才会显示登录页面。
即目前本地localStorage所存jwt_token若不合法,就将其定为非拉取信息状态,才显示登录页面。
只要本地localStorage所存jwt_token合法,边不会显示登录页面
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/qq_46201146/article/details/126225610