vue页面控制权限,vuex刷新保存状态、登陆状态保存

对于一个网站，有些页面是须要登陆后才能访问的，这个时候须要作到权限管理

---

一、页面权限控制

---

这个常见作法是，在路由跳转的时候作判断，经过router钩子函数判断页面是否须要登陆

首先在router配置 meta属性

而后在钩子函数里面判断

to.meta.requireAuth为true就跳去登陆页面登陆，不然就直接到要访问的页面

---

二、vuex页面F5刷新后维持刷新前的状态不变

---

对于在当前访问网页使用F5刷新以后，页面的变量和参数都会丢失，这时页面显示的内容会变得不友好，用户体验很差，咱们能够经过将页面的参数和变量保存到sessionStorage中，当刷新后再从sessionStorage将变量和状态取回来渲染回页面，那样F5刷新后，用户看到的页面仍是刷新前的。

首先在store的index.js中，state，增长页面要保存的变量，而且将它们的值和sessionStorage里面的绑定

而后再新增mutations，这是将变量写入sessionStorage的方法

接着就能够在登陆函数中这样调用，登陆成功后将须要的变量写进sessionStorage

在路由的钩子函数里面能够这样将变量取回来，那样页面刷新后，也能将刷新前的状态保持

---

三、登陆状态保存

---

咱们在网页中，经常有一个功能，就是像下图那样，勾选后十天内免登陆，也就是记住登陆状态

这个较上面的功能有一个不同的地方就是，上面的刷新，假如我是登陆状态，我将浏览器关闭以后再打开，再打开浏览器，我仍是须要登陆的

那若是我勾选了十天内免登陆，登陆后没有退出，而后把浏览器关闭了，再从新打开，是不须要登陆的，这个功能怎么实现呢?

这就要用到localStorage来实现了

首先，同样须要在store的index.js中，state，增长页面要保存的变量，而且将它们的值和localStorage里面的绑定

而后再新增mutations，这是将变量写入localStorage的方法

---

须要一个自动登陆的方法，若是是勾选了就为true，而后就会将须要用到的变量写到localStorage

固然还有登出的

接着就能够在登陆函数中，根据有没有勾选自动登陆来判断，是否是在登陆成功后将须要的变量写进localStorage

最后在路由的钩子函数里面作相应的处理

是否是须要登陆，而后有没有勾选自动登陆，根据布尔值来进行不一样的路由操做，而后须要用到的变量操做其实和上面保持页面刷新后的是大同小异的

固然这里还须要一个后台的校验接口，就是在勾选了自动登陆后，若是是10天期限，那就要在进入true 的分支后再请求后台去校验token是否过时，若是过时就要从新登陆了，不然就一切照常

---

小结

---

此次总结了前端页面登陆校验的常见三种状况，在平常开发中常常遇到，若有纰漏请指出和交流