接上篇《12、登录与退出功能-请求登录》
上一篇我们讲解了点击登录后发起登录请求的操作,本篇我们来讲解登录成功之后,保存登录会话状态的操作。
一、登录后的事件简述
我们在登录成功之后,需要完成以下内容,来保持登录效果以及跳转登录首页:
1、将登录成功后的token,保存到客户端的sessionStorage中
1.1 项目中除了登录之外的其他API接口,必须在登录后才能访问
1.2 token只应在当前网站打开期间生效,所以将token保存在sessionStotage中。
2、通过编程式导航跳转到后台主页,路由地址是/home。
二、获取token并保存
保存token(令牌)就是为了保持登录状态,去访问只有登录后才能访问的API,必须要携带这个后台给我们颁发的token令牌。
那么为什么前面说到要把token保存在sessionStorage而不是localStorage中呢?
对于不了解以上两种前端存储模式的童鞋,我们先来回顾一下sessionStorage和localStorage(感兴趣的可以看我之前的VUE基础博文(【Vue学习总结】9.Vue结合localStorage和生命周期实现todolist】):
什么是loaclStroage?loaclStroage是Html5中加入的新特性,该特性可作为本地存储来使用,即在浏览器上提供了一个5M大小的存储,将第一次请求的数据直接存储到本地,解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)。
使用localStorage需要注意一下事项:
(1)IE8以上的IE版本才支持localStorage这个属性。
(2)localStorage的值类型限定为string类型,如果存储JSON对象类型,需要转换。
(3)localStorage在浏览器的隐私模式下面是不可读取的。
(4)localStorage存储内容多会导致页面卡顿。
(5)localStorage不能被爬虫抓取到。
(6)localStorage遵循同源策略,不同网站不能直接共用相同的localStorage。
localStorage还有个兄弟叫sessionStorage,他们唯一的区别就是localStorage是永久性存储,而sessionStorage在会话结束的时候其存储的键值对会被清空。
因为我们的登录状态需要仅在网站打开期间生效,浏览器关闭或者缓存被清除后,登录状态就要被清除的,所以这里选择使用sessionStorage。
其实之前我们访问登录API接口后,实际上是给我们反馈了一个token的,我们将它打印出来看看:
点击登录后,F12查看控制台:
可以看到反馈的token参数,我们来编写保存的逻辑代码:
因为登录成功之后,需要跳转到后台首页,所以使用$router的push进行路由跳转 ,路由地址是“/home”。
我们重新刷新页面点击登录,在F12开发者工具的Application中,查看sessionStorage:
可以看到在回话存储中,看到了我们保存的token。同时页面地址跳转到了home页面。
注:不了解“$router.push”的同学,请查看我之前的博文“【Vue学习总结】19.编程式导航和Hash以及History模式”
二、创建home组件
上面我们成功登录并保存了token,同时跳转到了home页面。由于我们没有创建home页面并设置路由,所以页面是白色的,我们来完成它。首先在components下面创建Home.vue文件,编写如下内容:
然后在路由规则文件/router/index.js下,引入Home组件并设置路由映射:
然后刷新页面,重新登录,发现可以正常跳转home页面了:
三、设置Home页面访问权限
由于我们的Home页面是需要在登录成功之后才可以进行访问的,所以登录之前我们要控制用户无法访问该页面,如何做呢?
我们需要用到“路由导航守卫”来控制访问权限。如果用户没有登录,但是直接通过URL访问特定页面,需要重新导航到登录页面。router的beforeEach方法就是“路由导航守卫”,我们可以遍历router的所有路由地址,并可以设置跳转的动作。思路很简单,如果当前访问页面是登录页面,就正常跳转,如果不是,就检测是不是登录状态(token是否为空),如果不是,就跳转到登录页面,如果是就正常跳转。
我们在路由规则文件/router/index.js下,编写“挂载路由导航守卫”的逻辑:
重新刷新页面,清除缓存,我们强制访问home页面,发现被跳转到login页面,权限控制成功:
至此,登录后的状态保存和页面跳转及权限管理讲解完毕。
下一篇我们来讲解退出功能,以及提交我们的分支代码。
参考:黑马程序员Vue项目实战教学视频