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_token
从localStorage
删除。
登录后查看Local Storage
可以看到所存储的jwt_token
。
用户重定向到登陆页面的时候,我们可以事先判断有没有将token
存在本地LocalStorage
,如果存在本地就把token
取出来,验证是否过期。如果没有过期,无需重新登陆,可直接跳转到首页。
刷新之后其实是一个未登录状态,自动先跳到我们的登录页面。先从本地把我们的token取出来,发现token存在把token,更新到我们的内存当中,然后再从云端请求下这个用户的信息。如果可以请求的信息表示我们的token,是有效的,表示用户是登录的,我们就可以跳转到首页。
刷新时闪过登录页面处理+闪过右上角注册登录处理