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_token
从localStorage
删除。
登录后查看Local Storage
可以看到所存储的jwt_token
。
2、用户重定向到登陆页面的时候,我们可以事先判断有没有将token
存在本地LocalStorage
,如果存在本地就把token
取出来,验证是否过期。如果没有过期,无需重新登陆,可直接跳转到首页。
刷新时闪过登录页面处理
1、全局存储记录是否时拉去信息的过程,若是则不显示登录页面。并写相应方法修改。
2、 v-if控制是否显示login里的content
3、实现本地localStorage
所存jwt_token
不合法才会显示登录页面。
即目前本地localStorage
所存jwt_token
若不合法,就将其定为非拉取信息状态,才显示登录页面。
只要本地localStorage
所存jwt_token
合法,边不会显示登录页面