这节把前面几节学习的内容在前端进行展现 结合前面学习的axios的拦截器实现token的续期（如何续期呢 难道让用户手工点击续期 这样体验很差）如何实现token的自动续期呢
这节先说下后端token续期机制
在学续期机制前 把前两节学到的token过期机制在前台页面演示下
首先准备个页面
内容如下
image.png
其中login方法 里面 是请求获取token并且将token保存到localStorage里面
然后在axios的request拦截器里设置获取localStorage里的token
其中config参数里面的url是当前请求的具体url地址 不包括baseURL部分
然后在我们请求新闻地址时自动加上token参数 才能获取成功
这个在拦截器中配置的
具体代码如下
image.png
image.png
运行效果
image.png
首先点击获取token
image.png
image.png
image.png
在点击下面获取新闻 在法定时间内显示如上status为ok 但是在过几秒在点击获取新闻
出现如下 status为refresh_token表示超过了法定时间 但是redis里还没过期 这时前端需要续期（如何续期下节会接触到）
image.png
然后在过会再次点击获取新闻
出现如下
image.png
表示token过期了
同理如果我们运行页面时不点击获取token按钮直接获取新闻也是不能获取的
最后说下后端token续期做法
image.png
网友评论